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 id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < L; i++)document.write('<div 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>

上一篇：这个随机增大变小的文字效果也不错

下一篇：打字文字、交替闪烁出现

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注