js实现模板在屏幕左右循环移动

最新推荐文章于 2023-02-14 15:33:21 发布

papima

最新推荐文章于 2023-02-14 15:33:21 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/papima/article/details/78218995

版权

在这里我是定义的div模板来回移动，代码如下：

 1 <!DOCTYPE HTML>
 2 <html>
 3  
 4 <head>
 5     <meta charset=utf-8 />
 6     <title>UFO来了</title>
 7     <script>
 8         window.onload = function() {
 9             var i = 10;
10             var j = 0;
11             var e = target;
12             var win = document.documentElement || document.body;
13  
14             function intern() {
15                 var width = e.clientWidth;
16                 var height = e.clientHeight;
17                 var left = parseFloat(e.style.left);
18                 var top = parseFloat(e.style.top);
19                 var windowWidth = win.clientWidth;
20                 var windowHeight = win.clientHeight;
21                 if (windowWidth - width < (left + i)) {
22                     i = -i;
23                 } else if ((left + i) < 0) {
24                     i = -i;
25                 }
26                 if (windowHeight - height < (top + j)) {
27                     j = -j;
28                 } else if ((top + j) < 0) {
29                     j = -j;
30                 }
31                 e.style.left = left + i + "px";
32                 e.style.top = top + j + "px";
33             }
34             setInterval(intern, 30);
35         };
36     </script>
37 </head>
38  
39 <body>
40     <div id="target" style="border-radius:90px;background-color: red; width: 30px; height: 30px; position: absolute; top:100px; left: 0px;"></div>
41 </body>
42  
43 </html>

papima

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现模板在屏幕左右循环移动

在这里我是定义的div模板来回移动，代码如下： 1 2 3 4 5 6 UFO来了 7 8 window.onload = function() { 9 var i = 10;10 var j = 0;11 var e = target;12
复制链接

扫一扫