js实现模板在屏幕左右循环移动
2017-10-12 19:55
846 查看
在这里我是定义的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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 