脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现文字跟随鼠标特效

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数组方法reduce的妙用之处分享

    Javascript数组方法reduce的妙用之处分享

    这篇文章主要给大家介绍了关于Javascript数组方法reduce的妙用之处，文中通过示例代码介绍的非常详细，对大家学习或者使用Javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JavaScript让IE浏览器event对象符合W3C DOM标准

    JavaScript让IE浏览器event对象符合W3C DOM标准

    IE浏览器event对象跟W3C实现的不一样.所以自己封装一个EventUtil类来让IE浏览器的event对象与W3C一样.
    2009-11-11
  • 解析JavaScript中的不可见数据类型

    解析JavaScript中的不可见数据类型

    这篇文章主要是对JavaScript中的不可见数据类型进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • JS中for...in 和 for...of 的区别解析

    JS中for...in 和 for...of 的区别解析

    for … in 用于迭代对象的可枚举字符串属性,包括自身属性和继承的属性,但不会遍历对象的原型链上的 非可枚举属性,以及对象的方法,这篇文章主要介绍了JS中for...in 和 for...of 的区别,需要的朋友可以参考下
    2024-03-03
  • 通过构造函数实例化对象的方法

    通过构造函数实例化对象的方法

    下面小编就为大家带来一篇通过构造函数实例化对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Extjs 点击复选框在表格中增加相关信息行

    Extjs 点击复选框在表格中增加相关信息行

    这篇文章主要介绍了Extjs 点击复选框在表格中增加相关信息行 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • Js实现中国公民身份证号码有效性验证实例代码

    Js实现中国公民身份证号码有效性验证实例代码

    这篇文章主要介绍了Js实现中国公民身份证号码有效性验证实例代码，可以识别身份证号码的正确性，有兴趣的可以了解一下
    2017-05-05
  • JavaScript库之vanilla-tilt使用教程(一个平滑的3D倾斜库)

    JavaScript库之vanilla-tilt使用教程(一个平滑的3D倾斜库)

    vanilla-tilt.js是Javascript中一个平滑的3D倾斜库,可以让网页的一些控件变得动态起来,下面这篇文章主要给大家介绍了关于JavaScript库之vanilla-tilt使用的相关资料,需要的朋友可以参考下
    2023-02-02
  • JavaScript 常用函数库详解

    JavaScript 常用函数库详解

    在WEB开发中，javascript提供了许多函数供开发人员使用，这些函数在Ajax流行前足够了，但要构建一个交互性强些的应用恐怕就麻烦了。
    2009-10-10
  • BootStrap便签页的简单应用

    BootStrap便签页的简单应用

    本文通过实例代码给大家简单介绍了bootstrap便签页的简单应用，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-01-01

最新评论