Day4-----rollOver

最新推荐文章于 2024-08-16 19:02:09 发布

weixin_30319153

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量41

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fleshy/p/4116197.html

版权

//-----------------------使用offset属性完成无缝滚动的图片列和其配套的功能

 1 <html>
 2 <head><title>rollOver</title></head>
 3 <style type="text/css">
 4     img,div,li,ul{margin: 0px;padding: 0px;}
 5     img{width: 140px;height: 170px;float: left;margin-left: 10px;margin-top: 10px;border: 1px solid gray;}
 6     li{list-style-type: none;}
 7     #box{width: 460px;height: 190px;background: pink;overflow: hidden;left:;top: 150px;position: absolute;}
 8     #roll{position: absolute;left: 0px;width: 460px;}
 9 </style>
10 <script type="text/javascript">
11     window.οnlοad=function(){
12         var direction=-2;
13         var nowDirection;
14         var i;
15         var timeout;
16         oBtn=document.getElementById('direction');
17         oPause=document.getElementById('pause');
18         oImg=document.getElementsByTagName('img');
19         oDiv=document.getElementById('roll');
20         oBox=document.getElementById('box');
21         oBox.style.left=(screen.width-parseInt(oBox.offsetWidth))/2+'px';
22         oDiv.style.width=(oImg[0].offsetWidth+10)*oImg.length+'px';
23         oBtn.οnclick=function(){
24             direction=-direction;
25         }
26         oPause.οnclick=function(){            
27             if(direction!=0){nowDirection=direction;direction=0;}        
28             else direction=nowDirection;
29         }
30         for(i=0;i<oImg.length;i++){
31             oImg[i].οnmοuseοver=function(){
32                 if(direction) nowDirection=direction;
33                 direction=0;
34                 this.style.width="200px";
35                 this.style.border="5px solid gray";
36                 clearTimeout(timeout);
37             }
38             oImg[i].οnmοuseοut=function(){
39                 timeout=setTimeout(function(){direction=nowDirection;},200);
40                 this.style.border="1px solid gray"
41                 this.style.width="140px"
42             }
43         }        
44         var timer=setInterval(function(){            
45             oDiv.style.left=(oDiv.offsetLeft+direction)+'px';                                
46             if(oDiv.offsetLeft<(-oDiv.offsetWidth/2)) 
47                 oDiv.style.left=0+'px';
48             if(oDiv.offsetLeft>0)
49                 oDiv.style.left=-oDiv.offsetWidth/2+'px';
50         },10);
51     }
52 </script>
53 <body>
54     
55     <div id="box">
56         <div id="roll">
57             <ul>
58                 <li><img src="pic/pic1.jpg"></li>
59                 <li><img src="pic/pic2.jpg"></li>
60                 <li><img src="pic/pic3.jpg"></li>
61                 <li><img src="pic/pic4.jpg"></li>
62                 <li><img src="pic/pic1.jpg"></li>
63                 <li><img src="pic/pic2.jpg"></li>
64                 <li><img src="pic/pic3.jpg"></li>
65                 <li><img src="pic/pic4.jpg"></li>
66             </ul>
67         </div>
68     </div>
69     <div>
70         <input type="button" value="reverse" id="direction">
71         <input type="button" value="pause" id="pause">
72     </div>
73     
74 </body>
75 </html>

转载于:https://www.cnblogs.com/fleshy/p/4116197.html

weixin_30319153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day4-----rollOver

//-----------------------使用offset属性完成无缝滚动的图片列和其配套的功能 1 <html> 2 <head><title>rollOver</title></head> 3 <style type="text/css"> 4 img,div,li,ul{margin:...
复制链接

扫一扫