js根据鼠标移动速度背景图片自动旋转的方法
本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>js实现图片快速旋转围绕的鼠标</title> <metahttp-equiv="content-type"content="text/html;charset=gb2312"> </head> <body> <scriptlanguage="JavaScript"> <!-- varimages='/favicon.ico'; varamount=7; varspeed=1; varRunTime=0; varcntr=0; varxcntr=100; varpulse=25; varXpos=0; varYpos=0; var_y; vartemp; /*IfyouuseanimagelargerorsmallerthantheoneI'veused thecursorwillbeoffcenter.Alterthe2variablesbelowtocenterit.*/ varUpDown=-10; varLeftRight=-5; if(document.all){ document.write('<divid="ieDiv"style="position:absolute;top:0px;left:0px">'); document.write('<divid="c"style="position:relative">'); for(n=0;n<amount;n++) document.write('<imgsrc="'+images+'"style="position:absolute;top:0px;left:0px;visibility:hidden">'); document.write('</div>'); document.write('</div>'); functionFollowMouse(){ Xpos=document.body.scrollLeft+event.x+UpDown; Ypos=document.body.scrollTop+event.y+LeftRight; } document.onmousemove=FollowMouse; } elseif(document.layers){ window.captureEvents(Event.MOUSEMOVE); functionxFollowMouse(evnt){ Xpos=evnt.pageX+UpDown; Ypos=evnt.pageY+LeftRight; } window.onMouseMove=xFollowMouse; for(ns=0;ns<amount;ns++) document.write("<LAYERNAME='n"+ns+"'LEFT='0'TOP='0'VISIBILITY='HIDE'><IMGSRC='"+images+"'></LAYER>"); } functionmsi(){ if(document.layers){ for(i=0;i<ns;i++) { temp="n"+i document.layers[0].visibility='show'; document.layers[0].top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5); document.layers[0].left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5); } cntr+=1; RunTime+=speed; stp=setTimeout('msi()',10); if(cntr>=100) { cntr=100; speed=2.5; for(i=0;i<ns;i++) { temp="n"+i document.layers[temp].visibility='show'; document.layers[temp].top=Ypos+cntr*Math.cos((RunTime-100)*i/90); document.layers[temp].left=Xpos+cntr*Math.sin((RunTime-100)*i/90); } } if(RunTime>182) { speed=0.5; for(i=0;i<ns;i++) { temp="n"+i document.layers[temp].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5); document.layers[temp].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5); } } } elseif(document.all){ for(i=0;i<ieDiv.all.c.all.length;i++) { ieDiv.all.c.all[0].style.visibility='visible'; ieDiv.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5); ieDiv.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5); } cntr+=1; RunTime+=speed; stp=setTimeout('msi()',10); if(cntr>=100) { cntr=100; speed=2.5; for(i=0;i<ieDiv.all.c.all.length;i++) { ieDiv.all.c.all[i].style.visibility='visible'; ieDiv.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90); ieDiv.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90); } } if(RunTime>182) { speed=0.5; for(i=0;i<ieDiv.all.c.all.length;i++) { ieDiv.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5); ieDiv.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5); } } } if(RunTime>210) { xcntr-=10; } if(document.layers) _y=-window.innerWidth-90; elseif(document.all) _y=-document.body.clientWidth-90; if(xcntr<=_y) { RunTime=0; speed=1; cntr=0; xcntr=100; } } msi() //--> </script> <scriptlanguage="Javascript"> <!-- functionselectAll(theField){ vartempval=eval("document."+theField) tempval.focus() tempval.select() } //--> </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。