手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript实现文字跟随鼠标特效
JavaScript实现文字跟随鼠标特效
摘要:本文实例讲述了JavaScript如何实现文字跟随鼠标特效。分享给大家供大家参考。具体如下:运行效果图如下:鼠标特效--文本围绕鼠标鼠标特效...

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

运行效果图如下:

JavaScript实现文字跟随鼠标特效1

<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); <> 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; <> var MouseText=new Array(7); <> MouseText[1]="脚"; MouseText[2]="本"; MouseText[3]="之"; MouseText[4]="家"; MouseText[5]="欢"; MouseText[6]="迎"; MouseText[7]="你"; <> for(i=1;i<=7;i++) document.write("<div id='MouseText"+i+"'><font face='Forte' color='#FF0000'>"+MouseText[i]+"</font></div>"); MouseTextStart(); </script> <> </BODY> </HTML>

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

【JavaScript实现文字跟随鼠标特效】相关文章:

javascript获取select值的方法分析

JavaScript中用于生成随机数的Math.random()方法

Javascript中prototype属性实现给内置对象添加新的方法

javascript实现表格增删改操作实例详解

JavaScript实现Flash炫光波动特效

基于javascript简单实现对身份证校验

javascript实现图片跟随鼠标移动效果的方法

在JavaScript中使用NaN值的方法

JavaScript实现列表分页功能特效

JavaScript对表格或元素按文本,数字或日期排序的方法

精品推荐
分类导航