将行为层和结构层分离 Html文档

代码
<ul id="gall">
<li><a title="01" href="http://www.heavenfoliage.cn/upload/200806170954325012.jpg"><img alt="01.jpg" width="80" name="" src="http://www.heavenfoliage.cn/upload/200806170954325012.jpg" /></a></li>
<li><a title="02" href="http://www.heavenfoliage.cn/upload/200806170954576562.jpg"><img alt="02.jpg" width="80" name="" src="http://www.heavenfoliage.cn/upload/200806170954576562.jpg" /></a></li>
<li><a title="03" href="http://www.heavenfoliage.cn/upload/200806170955180410.jpg"><img alt="03.jpg" width="80" name="" src="http://www.heavenfoliage.cn/upload/200806170955180410.jpg" /></a></li>
<li><a title="04" href="http://www.heavenfoliage.cn/upload/200806170955320034.jpg"><img alt="04.jpg" width="80" name="" src="http://www.heavenfoliage.cn/upload/200806170955320034.jpg" /></a></li>
</ul>
<div id="div_bigimg"></div>

Javascript文档 

代码
<script>
function showpic(whichpic)
{
var source=whichpic.getAttribute("href");
var image=document.getElementById("image")image.setAttribute("src",source);
var imgUrl=document.getElementById("div_bigimg").getElementsByTagName("a")[0]imgUrl.href=source;imgUrl.onclick=function(){
window.open(source,'go', 'height=300, width=300, top=150, left=170, toolbar=no, menubar=no,scrollbars=no,resizable=no,location=no, status=no')
return false
}
}
function prepareGall()
{  
//创建行为
  if(!document.getElementsByTagName) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("gall")) return false;
  var gally=document.getElementById("gall");
  var links=gally.getElementsByTagName("a");
  for(var i=0;i< links.length;i++){
  links[i].onclick = function(){
  showpic(this);
  return false
  }
  }
}
function showBigpic(){
  //创建大图
  var gallys=document.getElementById("gall");
  var gallyUrl=gallys.getElementsByTagName("a")[0]
  var source=gallyUrl.getAttribute("href");
 //获取第一张图的地址
  var bigImgUrl=document.createElement("a");
  //创建节点a
  var bigImage=document.createElement("img"); //创建节点img
  var bigImgdiv=document.getElementById("div_bigimg")
  bigImgdiv.appendChild(bigImgUrl) //在 bigImgdiv下添加节点a
  bigImgUrl.appendChild(bigImage) //在 a下添加节点 img
  bigImage.setAttribute("id","image"); //设置img的id为image
  bigImage.src=source //显示第一张大图
  bigImage.width="395"
  bigImage.height="256"
  bigImgUrl.href=source //大图链接
bigImgUrl.onclick=function(){
  window.open (sources,'go', 'height=300, width=300, top=150, left=170, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')
  return false }
}
function addLoadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload!='function'){
  window.onload=func
  }else{
  window.onload=function(){
  oldonload();
  func();
  }
  }
}
addLoadEvent(showBigpic);
addLoadEvent(prepareGall);
</script>
http://www.heavenfoliage.cn/cmd.asp?act=tb&id=58&key=99887

转载于:https://www.cnblogs.com/gaonengquan/archive/2009/04/07/1430994.html