Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-04-22 23:57:09

文字跟随鼠标鼠标跟随特效文字跟随路径

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <HTML>
<HEAD>
<TITLE>鼠标特效篇--文本围绕鼠标</TITLE>
</HEAD>

var cx=0;
var cy=0;
var val=0;

function MouseTextStart(){   
  for(i=1;i<=7;i++)  {  val=setInterval("MouseTextShow(1)",20); 
  setInterval("MouseTextfollow("+i+")",100);  }
}

function MouseTextfollow(i){  
  var x;
  if(i<6)x=cx-70+i*10;
  else x=cx-35+i*10;
  var y=cy-10+Math.floor(Math.random()*40);
  w=eval("MouseText"+i);
  with(w.style)  { left=x.toString()+"px"; top=y.toString()+"px";  }
}

function MouseTextLocation(){   
  cx=window.event.x;
  cy=window.event.y;    
}

document.onmousemove=MouseTextLocation;
var MouseText=new Array(7);
MouseText[1]="I"; MouseText[2]="L"; MouseText[3]="O"; MouseText[4]="V"; MouseText[5]="E"; MouseText[6]="Y"; MouseText[7]="O"; MouseText[7]="U";
for(i=1;i<=7;i++)  document.write("<div id='MouseText"+i+"' style='width:20px; height:20px; position:absolute; font-size:1000; visibility:hidden'><font face='Forte' color='#fff'>"+MouseText[i]+"</font></div>");

MouseTextStart();

</script>
</BODY>

</HTML>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章： css样式各种鼠标状态效果

下一篇文章： js禁止使用鼠标右键特效代码