JavaScript鼠標(biāo)特效-跟隨鼠標(biāo)旋轉(zhuǎn)的流星

2024-09-05 12:22:20

字體：大中小

供稿：網(wǎng)友

一個JS實現(xiàn)的鼠標(biāo)特效，跟隨鼠標(biāo)旋轉(zhuǎn)的流星，想對網(wǎng)頁個性化定制的朋友，你可不要錯過本款代碼哦，我覺得是很不錯的。本網(wǎng)頁特效的背景一定要設(shè)置成黑色哦，否則看不到效果的。用JavaScript編寫鼠標(biāo)跟隨特效的也可參考此代碼。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>跟隨鼠標(biāo)旋轉(zhuǎn)的流星</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   class="iwvjtn8m0"   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>

上一篇：點擊鼠標(biāo)蹦出爆米花文字(JavaScript效果)

下一篇：Js實現(xiàn)跟隨鼠標(biāo)的半透明圖片