《JavaScript代码实现左右上下自动晃动自动移动_.docx》由会员分享,可在线阅读,更多相关《JavaScript代码实现左右上下自动晃动自动移动_.docx(5页珍藏版)》请在三一文库上搜索。
1、JavaScript代码实现左右上下自动晃动自动移动_ 最近几天做了一个项目,原来是用css3动画做的,由于不兼容IE,改成用js做了,特此分享给大家,供大家参考,代码有bug欢迎提出,写的不好还请见谅! !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l xml:lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 / titlefloat left
2、and top/title style type=text/css .w1000position:relative;width:1000px;margin:0 auto; .positionpubposition:absolute; .positionpub pwidth:50px;height:50px;background:#333;color:#fff;line-height:50px;text-align:center;position:absolute; .ad_Floattop:50px;left:50px; .ad_Float1top:150px;left:250px; .ad_
3、Float2top:250px;left:450px; /style /head body div class=w1000 div class=ad_Float positionpub p id=ad_Floatleft/p /div div class=ad_Float1 positionpub p id=ad_Float1right/p /div div class=ad_Float2 positionpub p id=ad_Float2down/p /div /div script type=text/javascript var x = 0, y = 0 , x1 = 0; var x
4、in = true, yin = true; var step = 1,step2 = 2; var delay = 10; var obj = document.getElementById(ad_Float); var obj1 = document.getElementById(ad_Float1); var obj2 = document.getElementById(ad_Float2); function ad_Float() var L = 0; var R = 100; obj.style.left = x + document.documentElement.scrollLe
5、ft + px; x = x + step * (xin ? 1 : -1); if (x L) xin = true; x = L; if (x R) xin = false; x = R; ; function ad_Float1() var L1 = 0; var R1 = 100; obj1.style.left = x1 + document.documentElement.scrollLeft + px; x1 = x1 + step * (xin ? 1 : -1); if (x1 L1) xin = true; x1 = L1; if (x1 R1) xin = false;
6、x1 = R1; ; function ad_Float2() var T = 0; var B = 150; obj2.style.top = y + document.documentElement.scrollTop + px; y = y + step2 * (yin ? 1 : -1); if (y T) yin = true; y = T; if (y B) yin = false; y = B; ; var itl = setInterval(ad_Float(), delay); var itl1 = setInterval(ad_Float1(), delay); var itl2 = setInterval(ad_Float2(), delay); /script /body /html 代码到此结束了,盼望对大家有所关心! .