js的setInterval事件

最新推荐文章于 2020-09-24 21:52:09 发布

weixin_30411819

最新推荐文章于 2020-09-24 21:52:09 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leeten/p/3457496.html

本文介绍了一种使用JavaScript实现的元素自动滚动效果，并在触碰边界时改变方向以达到反弹的效果。通过设置定时器，使得指定的div元素在页面中自动移动，当元素碰到边界时，会自动调整移动方向继续移动。同时，鼠标悬停在元素上时，该元素会停止移动，鼠标移开后则继续移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <body>
 2    <div id="content"  style="position:relative; height:1000px; width:1000px; background-color:#666;">
 3     <div id="one" style="position:absolute;top:0px; left:0px; height:100px; width:100px; background-color:red;"></div>
 4     </div>
 5         <script>
 6           var one=document.getElementById('one')
 7           var x=0;
 8           var y=0;
 9           var xs=10;
10           var ys=10;
11           function scroll(){
12               x+=xs;
13               y+=ys;
14               if(x>=document.getElementById('content').offsetWidth-one.offsetWidth-20 || x<=0)
15               {
16                   xs=-1*xs;
17                   
18               }
19             if(y>=document.getElementById('content').offsetHeight-one.offsetHeight-20 || y<=0)
20               {
21                   
22                   ys=-1*ys;
23               }
24               one.style.left=x;
25               one.style.top=y;
26 
27           }
28           dt=setInterval(scroll,100);
29           one.onmouseover=function(){
30           clearInterval(dt);    
31           };
32           one.onmouseout=function(){
33           dt=setInterval(scroll,100);
34           };
35         </script>
36 </body>