JavaScript 左右上下自动晃动，自动移动。
最近做了一个项目，本来用css3动画做的，不兼容ie，用js做了个，分享给大家。
代码修改了下，上下左右四个模块，顺时针转动。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>float left and top</title> <style type="text/css"> *{margin:0;padding:0;} .demo{position:relative;width:500px;margin:0 auto;height:500px;margin-top:10px;border:1px solid #333;} .positionpub{position:absolute;width:100px;height:100px;} .positionpub p{width:100px;height:100px;background:#333;color:#fff;line-height:100px;text-align:center;position:absolute;} .float-left-t{top:0;left:0;} .float-right-t{top:0;right:0;} .float-bottom-l{bottom:0;left:0;} .float-bottom-r{bottom:0;right:0;} </style> </head> <body> <div class="demo"> <div class="float-left-t positionpub"> <p id="left_top">lefttop</p> </div> <div class="float-right-t positionpub"> <p id="right_top">righttop</p> </div> <div class="float-bottom-l positionpub"> <p id="left_bottom">leftbottom</p> </div> <div class="float-bottom-r positionpub"> <p id="right_bottom">rightbottom</p> </div> </div> <script type="text/javascript"> var x = 0, y = 0 , x1 = 0 , y1 = 0; var xin = true, yin = true; var step = 1,step2 = 2; var delay = 100; var obj = document.getElementById("left_top"); var obj1 = document.getElementById("right_top"); var obj2 = document.getElementById("left_bottom"); var obj3 = document.getElementById("right_bottom"); function left_top() { var L = 0; var R = 100; obj.style.left = x + document.documentElement.scrollLeft + "px"; x = x + step * (xin ? 1 : -1); //xin是一个变量， (xin?1:-1) 的意思就是 当 xin 为 true 或者 非0， 括号里的表达式值为 1， xin为 false，表达式的值为 -1. if (x < L) { xin = true; x = L; } if (x > R) { xin = false; x = R; } }; function right_top() { var T = 0; var B = 100; obj1.style.top = y + document.documentElement.scrollTop + "px"; y = y + step * (yin ? 1 : -1); if (y < T) { yin = true; y = T; } if (y > B) { yin = false; y = B; } }; function left_bottom() { var B = 0; var T = 100; obj2.style.bottom = y1 + document.documentElement.scrollTop + "px"; y1 = y1 + step * (yin ? 1 : -1); if (y1 < B) { yin = true; y1 = B; } if (y1 > T) { yin = false; y1 = T; } }; function right_bottom() { var L = 0; var R = 100; obj3.style.right = x1 + document.documentElement.scrollLeft + "px"; x1 = x1 + step * (xin ? 1 : -1); if (x1 < L) { xin = true; x1 = L; } if (x1 > R) { xin = false; x1 = R; } }; var itl = setInterval("left_top()", delay); var itl1 = setInterval("right_top()", delay); var itl2 = setInterval("left_bottom()", delay); var itl3 = setInterval("right_bottom()", delay); </script> </body> </html>
