将行为层和结构层分离 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