首页 > 代码库 > Day10-------photoAlbum
Day10-------photoAlbum
//---------使用了z-index和复杂的时间控制完成了照片簿的功能，兼容各大浏览器
//----测试结果-----不知道为什么换成IE之后变得移动特别特别慢，可能是渲染的问题
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>photoAlbum</title> 6 </head> 7 <style type="text/css"> 8 #box{width: 600px;height: 300px;overflow: hidden;left:350px;top:100px;position: absolute;} 9 img{width: 500px;height: 300px;position: absolute;}10 span{height: 300px;width: 20px;position: absolute;background: #BBB;z-index: 3;}11 </style>12 <script type="text/javascript">13 window.onload=function(){14 var color=["#ABC","#BCD","#CDE","#DEF","#789","#456"];15 var timer;16 var order=-1;17 var iSpeed=0;18 var flag=0;19 var snapCount=0;20 oDiv=document.getElementById(‘album‘);21 oImg=document.getElementsByTagName(‘img‘);22 oSpan=document.getElementsByTagName(‘span‘);23 oImg[0].style.zIndex=1;24 function homing(offset){25 oImg[order+1].style.left=oDiv.offsetLeft+order*20+20+offset+‘px‘;26 oSpan[order].style.left=oDiv.offsetLeft+order*20+offset+‘px‘;27 }28 function move(){29 if((oSpan[order].offsetLeft>=order*20+oDiv.offsetLeft&&iSpeed<0)||(oSpan[order].offsetLeft<=order*20+500+oDiv.offsetLeft&&iSpeed>0)){30 oImg[order+1].style.left=oImg[order+1].offsetLeft+iSpeed+‘px‘;31 oSpan[order].style.left=oSpan[order].offsetLeft+iSpeed+‘px‘;32 }33 else{34 if(iSpeed<0) homing(0);35 else if(iSpeed>0) homing(500);36 clearInterval(timer);37 flag=1;38 } 39 }40 for(count=0;count<oSpan.length;count++){41 oSpan[count].style.left=oDiv.offsetLeft+500+count*20+‘px‘;42 oSpan[count].style.backgroundColor=color[count];43 oSpan[count].index=count;44 oSpan[count].onmouseover=function(){45 if(this.index==order){46 if(flag==0) return false;47 else iSpeed=-iSpeed;48 }49 else if(this.index>order){50 iSpeed=-4;51 oImg[this.index+1].style.left=oDiv.offsetLeft+520+this.index*20+‘px‘;52 if(order!=-1) homing(0); 53 }54 else {55 iSpeed=4;56 oImg[this.index+1].style.left=oDiv.offsetLeft+20+this.index*20+‘px‘;57 homing(500);58 }59 flag=0;60 clearInterval(timer);61 for(snapCount=0;snapCount<oImg.length;snapCount++) {oImg[snapCount].style.zIndex=0;} 62 order=this.index; 63 oImg[this.index].style.zIndex=1; 64 oImg[this.index+1].style.zIndex=2; 65 for(snapCount=0;snapCount<this.index;snapCount++)oSpan[snapCount].style.left=snapCount*20+oDiv.offsetLeft+‘px‘;66 for(snapCount++;snapCount<oSpan.length;snapCount++) oSpan[snapCount].style.left=snapCount*20+oDiv.offsetLeft+500+‘px‘; 67 timer=setInterval(function(){move();},10);68 }69 }70 }71 </script>72 <body>73 <div id="box">74 <div id="album">75 <img src="http://www.mamicode.com/pic/photo0.jpg">76 <img src="http://www.mamicode.com/pic/photo1.jpg">77 <img src="http://www.mamicode.com/pic/photo2.jpg">78 <img src="http://www.mamicode.com/pic/photo3.jpg">79 <img src="http://www.mamicode.com/pic/photo4.jpg">80 <img src="http://www.mamicode.com/pic/photo5.jpg">81 <span>相片一</span>82 <span>相片二</span>83 <span>相片三</span>84 <span>相片四</span>85 <span>相片五</span>86 </div>87 </div>88 </body>89 </html>
Day10-------photoAlbum
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。