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 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
javascript 数组操作详解
2015/01/29 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python tornado修改log输出方式
2019/11/18 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
党委书记个人对照检查材料
2014/09/15 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL