//---------使用了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>
时间： 2024-11-08 11:22:56