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程序设计有所帮助。