JavaScript实现文字跟随鼠标特效

前端技术 2023/09/02 JavaScript

本文实例讲述了JavaScript如何实现文字跟随鼠标特效。分享给大家供大家参考。具体如下：

运行效果图如下：

<HTML>
<HEAD>
<TITLE>鼠标特效--文本围绕鼠标</TITLE>
</HEAD>

<BODY>

<br><br>
<center>
<font color=\"red\"><h2>鼠标特效--文本围绕鼠标</h2></font>
<hr width=300>
<br><br>

<!-- 案例代码开始 -->

<script language=JavaScript>

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

function MouseTextStart(){ 
 for(i=1;i<=7;i++) { val=setInterval(\"MouseTextShow(1)\",20); 
<!-- [Step1]: 这里可以设置文本的抖动速度，数值大速度慢 --> 
 setInterval(\"MouseTextfollow(\"+i+\")\",100); }
} 

function MouseTextShow(i){ 
 var w=eval(\"MouseText\"+i);
 with(w.style) { visibility=\"visible\"; s=parseInt(fontSize); if(s>=200)s-=100; else if(s>90&&s<=100) { s-=85; clearInterval(val); if(i<7)val=setInterval(\"MouseTextShow(\"+(i+1)+\")\",20); } 
 fontSize=s; } 
}

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;
<!-- [Step2]: 在此能够更改文本的总数目 -->
var MouseText=new Array(7);
<!-- [Step3]: 这里可以按序增加文本信息 -->
MouseText[1]=\"脚\"; MouseText[2]=\"本\"; MouseText[3]=\"之\"; MouseText[4]=\"家\"; MouseText[5]=\"欢\"; MouseText[6]=\"迎\"; MouseText[7]=\"你\";
<!-- [Step4]: 在此能够更改文本的颜色 -->
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=\'#FF0000\'>\"+MouseText[i]+\"</font></div>\");

MouseTextStart();

</script>

<!-- 案例代码结束 -->


</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3624

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案