JavaScript实现文字跟随鼠标特效

 更新时间:2015年08月06日 15:54:52   投稿:lijiao  
这篇文章主要介绍了JavaScript如何实现文字跟随鼠标特效,d代码简单易操作,感兴趣的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • javascript中处理时间戳为日期格式的方法

    javascript中处理时间戳为日期格式的方法

    本文为大家介绍下javascript中如何将时间戳处理为日期格式,下面有个不错的示例,感兴趣的朋友可以参考下
    2014-01-01
  • 获取input标签的所有属性的方法

    获取input标签的所有属性的方法

    下面小编就为大家带来一篇获取input标签的所有属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 通过js示例讲解时间复杂度与空间复杂度

    通过js示例讲解时间复杂度与空间复杂度

    这篇文章主要给大家介绍了关于如何通过js示例讲解时间复杂度与空间复杂度的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 在JavaScript中判断整型的N种方法示例介绍

    在JavaScript中判断整型的N种方法示例介绍

    这篇文章主要介绍了在JavaScript中判断整型的N种方法,需要的朋友可以参考下
    2014-06-06
  • 十分钟教你上手ES2020新特性

    十分钟教你上手ES2020新特性

    这篇文章主要介绍了十分钟教你上手ES2020新特性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • javascript动画之模拟拖拽效果篇

    javascript动画之模拟拖拽效果篇

    其实javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍javascript的模拟拖拽,有需要的可以参考借鉴。
    2016-09-09
  • Javascript实现时间倒计时效果

    Javascript实现时间倒计时效果

    这篇文章主要为大家详细介绍了Javascript实现时间倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JS显示日历和天气的方法

    JS显示日历和天气的方法

    这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
    2016-03-03
  • ECMA5数组的新增方法有哪些及forEach()模仿实现

    ECMA5数组的新增方法有哪些及forEach()模仿实现

    这篇文章主要介绍了ECMA5数组的新增方法有哪些及forEach()模仿实现,需要的朋友可以参考下
    2015-11-11
  • 使用透明效果来自定义文件上传按钮控件样式

    使用透明效果来自定义文件上传按钮控件样式

    处于安全上的考虑,input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度),可能会跟设计师的设计格格不入,这时可以使用透明效果来自定义上传按钮
    2012-12-12

最新评论