JavaScript鼠标特效-跟随鼠标旋转的流星

2024-09-05 12:22:20

字体：大中小

来源：转载

供稿：网友

一个JS实现的鼠标特效，跟随鼠标旋转的流星，想对网页个性化定制的朋友，你可不要错过本款代码哦，我觉得是很不错的。本网页特效的背景一定要设置成黑色哦，否则看不到效果的。用JavaScript编写鼠标跟随特效的也可参考此代码。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>跟随鼠标旋转的流星</title></head><body bgcolor="#000000"><script language="JavaScript"><!--  ns=(document.layers)?1:0;Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')var amount=8var step=0.3;var currStep=0;var Ypos=0;var Xpos=0;if (ns){for (i=0; i < amount; i++)document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,2,2"></LAYER>');window.captureEvents(Event.MOUSEMOVE);  function nMouse(evnt){Ypos = evnt.pageY;Xpos = evnt.pageX;}window.onMouseMove=nMouse;}else{document.write('<div style="position:absolute;top:0px;left:0px">');document.write('<div style="position:relative">');for (i=0; i < amount; i++)document.write('<div id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></div>');document.write('</div></div>');function iMouse(){Ypos=event.y+document.body.scrollTop;Xpos=event.x+document.body.scrollLeft;}document.onmousemove = iMouse;}function Comet(){for (i=0; i < amount; i++){var randCol=Math.floor(Math.random()*Clrs.length);var layer=(document.layers)?document.layers['n'+i]:me[i].style;layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);if (ns) layer.bgColor=Clrs[randCol];else layer.background=Clrs[randCol];}currStep+=step;setTimeout("Comet()",10);}window.onload=Comet;</script></body></html>

上一篇：点击鼠标蹦出爆米花文字(JavaScript效果)

下一篇：Js实现跟随鼠标的半透明图片

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注