JS实现跟随鼠标旋转的图片

2024-09-05 12:22:20

字体：大中小

来源：转载

供稿：网友

JavaScript实现的鼠标跟随，一个花朵图片跟随鼠标不停的旋转，类似效果好像以前分享过一些，这一款也是挺不错的效果，喜欢的就拿出研究吧，很多代码都是原生JS的，希望大家喜欢哦。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>围绕图片疯狂旋转的花朵</title></head><body><script language="JavaScript"> var images='/jscss/demoimg/201310/flower.gif';//可改为其它图像 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; 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></body></html>

上一篇：鼠标点击游戏-反应速度测试

下一篇：JavaScript+ VML实现跟着鼠标弹跳的小球