闲扯 Javascript 04 滚动条

时间:2014-04-29 22:41:54   收藏:0   阅读:587

 

 

物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动

 

效果原理
让ul一直向左移动
复制li
innerHTML和+=
修改ul的width
滚动过界后,重设位置
判断过界

 

改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开启定时器
mamicode.com,码迷
 1 <style>
 2 *{ margin:0px; padding:0px;}
 3 #div1{ width:712px; height:108px; margin:100px auto; position:relative; background:#F00; overflow:hidden;}
 4 #div1 ul{ position:absolute; left:0px; top:0px; }
 5 #div1 ul li{ float:left; list-style:none; width:178px; height:108px;}
 6 </style>
 7 <script>
 8 
 9 window.onload=function ()
10 {
11     var oDiv=document.getElementById(div1);
12     var oUl=oDiv.getElementsByTagName(ul)[0];
13     var oLi=oDiv.getElementsByTagName(li);
14     
15     oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
16     oUl.style.width=oLi[0].offsetWidth*oLi.length+px;
17     var num=-2;
18     
19     function move()
20     {
21         if(oUl.offsetLeft<-oUl.offsetWidth/2)
22         {
23             oUl.style.left=0;
24             }
25             if(oUl.offsetLeft>0)
26             {
27                 oUl.style.left=-oUl.offsetWidth/2+‘px‘; //当oUl.style.left>0 也就是left 到达右边,后面跟着出现红色,此时只需把它的宽度拉到offsetWidth的中段(oUl的宽度)即可
28                 }
29         oUl.style.left=oUl.offsetLeft+num+px;
30         }
31     
32     timer=setInterval( move
33     ,30)
34     oDiv.onmouseover=function ()
35     {
36         clearInterval(timer);
37     };
38     
39     oDiv.onmouseout=function ()
40     {
41         timer=setInterval(move, 30);
42     };
43 
44     document.getElementsByTagName(a)[0].onclick=function ()
45     {
46         num=-2;
47         }
48         document.getElementsByTagName(a)[1].onclick=function (){ num=2;}
49     
50     
51     
52     };
53     
54 
55 </script>
56 </head>
57 
58 <body>
59 <a href="#">向左走</a>
60 <a href="#">向右走</a>
61 <div id="div1">
62   <ul>
63   
64   <li> <img src="images/1.jpg"/></li>
65    <li> <img src="images/2.jpg"/></li>
66     <li> <img src="images/3.jpg"/></li>
67       <li> <img src="images/4.jpg"/></li>
68   
69   </ul>
70 </div>
71 </body>
mamicode.com,码迷

 

闲扯 Javascript 04 滚动条,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!