JavaScript实现文字跟随鼠标特效


Posted in Javascript onAugust 06, 2015

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

Javascript 相关文章推荐
通过length属性判断jquery对象是否存在
Oct 18 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 #Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 #Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 #Javascript
You might like
php生成数字字母的验证码图片
2015/07/14 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python ldap实现登录实例代码
2016/09/30 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
pymysql模块使用简介与示例
2020/11/17 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
企划经理的岗位职责
2013/11/17 职场文书
应急处置方案
2014/06/16 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
施工员岗位职责
2015/02/10 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
办公用品管理制度
2015/08/04 职场文书
采购员工作总结范文
2015/08/12 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Python加密技术之RSA加密解密的实现
2022/04/08 Python