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="pic/photo0.jpg">
76         <img src="pic/photo1.jpg">
77         <img src="pic/photo2.jpg">
78         <img src="pic/photo3.jpg">
79         <img src="pic/photo4.jpg">
80         <img src="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>

 

posted on 2014-11-30 03:52  fleshy  阅读(139)  评论(0)    收藏  举报

导航