JavaScript代码实现左右上下自动晃动自动移动
最近几天做了一个项目,原来是用css3动画做的,由于不兼容IE,改成用js做了,特此分享给大家,供大家参考,代码有bug欢迎提出,写的不好还请见谅!
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>floatleftandtop</title> <styletype="text/css"> .w1000{position:relative;width:1000px;margin:0auto;} .positionpub{position:absolute;} .positionpubp{width:50px;height:50px;background:#333;color:#fff;line-height:50px;text-align:center;position:absolute;} .ad_Float{top:50px;left:50px;} .ad_Float1{top:150px;left:250px;} .ad_Float2{top:250px;left:450px;} </style> </head> <body> <divclass="w1000"> <divclass="ad_Floatpositionpub"> <pid="ad_Float">left</p> </div> <divclass="ad_Float1positionpub"> <pid="ad_Float1">right</p> </div> <divclass="ad_Float2positionpub"> <pid="ad_Float2">down</p> </div> </div> <scripttype="text/javascript"> varx=0,y=0,x1=0; varxin=true,yin=true; varstep=1,step2=2; vardelay=10; varobj=document.getElementById("ad_Float"); varobj1=document.getElementById("ad_Float1"); varobj2=document.getElementById("ad_Float2"); functionad_Float(){ varL=0; varR=100; obj.style.left=x+document.documentElement.scrollLeft+"px"; x=x+step*(xin?1:-1); if(x<L){ xin=true; x=L; } if(x>R){ xin=false; x=R; } }; functionad_Float1(){ varL1=0; varR1=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; x1=R1; } }; functionad_Float2(){ varT=0; varB=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; } }; varitl=setInterval("ad_Float()",delay); varitl1=setInterval("ad_Float1()",delay); varitl2=setInterval("ad_Float2()",delay); </script> </body> </html>
代码到此结束了,希望对大家有所帮助!