本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js实现图片快速旋转围绕的鼠标</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> </head> <body> <script language="JavaScript"> <!-- var images='/favicon.ico'; var amount=7; var speed=1; var RunTime = 0; var cntr=0; var xcntr=100; var pulse=25; var Xpos = 0; var Ypos = 0; var _y; var temp; /*If you use an image larger or smaller than the one I've used the cursor will be off center.Alter the 2 variables below to center it.*/ var UpDown=-10; var LeftRight=-5; if (document.all){ document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">'); document.write('<div id="c" style="position:relative">'); for (n=0; n < amount; n++) document.write('<img src="'+images+'" style="position:absolute;top:0px;left:0px;visibility:hidden">'); document.write('</div>'); document.write('</div>'); function FollowMouse(){ Xpos = document.body.scrollLeft+event.x+UpDown; Ypos = document.body.scrollTop+event.y+LeftRight; } document.onmousemove = FollowMouse; } else if (document.layers){ window.captureEvents(Event.MOUSEMOVE); function xFollowMouse(evnt){ Xpos = evnt.pageX+UpDown; Ypos = evnt.pageY+LeftRight; } window.onMouseMove = xFollowMouse; for (ns=0; ns < amount; ns++) document.write("<LAYER NAME='n"+ns+"' LEFT='0' TOP='0' VISIBILITY='HIDE'><IMG SRC='"+images+"'></LAYER>"); } function msi(){ 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); } } } else if (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; else if (document.all) _y=-document.body.clientWidth-90; if (xcntr <= _y) { RunTime=0; speed=1; cntr=0; xcntr=100; } } msi() //--> </script> <script language="Javascript"> <!-- function selectAll(theField){ var tempval=eval("document."+theField) tempval.focus() tempval.select() } //--> </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。