首页 > 代码库 > 闲扯 Javascript 04 滚动条

闲扯 Javascript 04 滚动条

2024-07-01 23:29:53   230人阅读

 

 

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

 

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

 

改变滚动方向
修改speed
修改判断条件
鼠标移入暂停
移入关闭定时器
移出重新开启定时器
 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>

 


联系
我们