Js讓文字跟隨鼠標圍成一個旋轉的圓圈

2024-09-05 12:21:27

字體：大中小

來源：轉載

供稿：網友

一款極棒的JavaScript鼠標跟隨效果，讓一段文字圍成一個旋轉的圓跟隨著鼠標移動，文字打亂后自動會恢復為一個圓圈，繼續轉動，挺酷的，希望大家喜歡哦！

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>圍繞鼠標旋轉的文字</title><style>body, td, div {font-size: 9pt }</style></head><body><script language="JavaScript">yourLogo='旋轉的圓圈';logoFont='Arial';logoSize=9;logoColor='red';logoWidth=40;logoHeight=40;logoSpeed=0.03;yourLogo=yourLogo.split('');L=yourLogo.length; Result="<font face="+logoFont+" style='font-size:"+logoSize+"pt' color="+logoColor+">";TrigSplit=360/L;br=(document.layers)?1:0;if (br){for (i=0; i < L; i++)document.write('<layer name="ns'+i+'" top=0 left=0 width=14 height=14">'+Result+yourLogo[i]+'</font></layer>');}else{document.write('<div   class="n9zvjtv"   id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < L; i++)document.write('<div   class="nnxzbzj"   id="ie" style="position:absolute;top:0px;left:0px;width:14px;height:14px">'+Result+yourLogo[i]+'</font></div>');document.write('</div></div>');}ypos=0;xpos=0;step=logoSpeed;currStep=0;Y=new Array();X=new Array();Yn=new Array();Xn=new Array();for (i=0; i < L; i++)  { Yn[i]=0; Xn[i]=0; }(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt){ ypos = (document.layers)?evnt.pageY:event.y; xpos = (document.layers)?evnt.pageX:event.x;}(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;function animateLogo(){if (!br)outer.style.pixelTop=document.body.scrollTop; for (i=0; i < L; i++){var layer=(document.layers)?document.layers['ns'+i]:ie[i].style;layer.top =Y[i]+logoHeight*Math.sin(currStep+i*TrigSplit*Math.PI/180);layer.left=X[i]+logoWidth*Math.cos(currStep+i*TrigSplit*Math.PI/180);}currStep-=step;}function Delay(){for (i=L; i >= 0; i--){Y[i]=Yn[i]+=(ypos-Yn[i])*(0.1+i/L);           X[i]=Xn[i]+=(xpos-Xn[i])*(0.1+i/L);        }animateLogo();setTimeout('Delay()',20);}window.onload=Delay;// --></script></body></html>

上一篇：這個隨機增大變小的文字效果也不錯

下一篇：打字文字、交替閃爍出現

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注