繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript:一个鼠标动态跟随文字特效的示例
- Javascript
- 可实现多表单提交的javascript函数
- 比较详细的关于javascript中void(0)的具体含义解释
- 随机显示经典句子或诗歌的javascript脚本
- javascript实现的多条新闻公告系统
- 解析arp病毒背后利用的Javascript技术附解密方法
- 比较详细的javascript对象的property和prototype是什么一种关系
- 访问百度和谷歌网速测试的javascript代码
- javascript 动态改变层的Z-INDEX的代码style.zIndex
- javascript+css实现单击颜色褪去效果
- javascript 表单日期选择效果
- 比较简单的javascript实现input双击后可以编辑
- javascript实现的颜色块滑动的动态效果
- js实现网页检测是否安装了 Flash Player 插件
- javascript 实现父窗口引用弹出窗口的值的脚本
- javascript 实现双击才能打开链接的方法
- 用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
- document.createElement("A")比较不错的属性
- 用javascript实现不按Ctrl实现Multiple Select多选
- JavaScript-世界上误解最深的语言分析
- IE和Mozilla的兼容性汇总event
Javascript 中的 JavaScript:一个鼠标动态跟随文字特效的示例
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 360 ::
收藏到网摘: n/a
这是去年我学习JavaScript时写的一个代码，里面有比较详细的注释。我个人以为是一个学习javascript和鼠标事件的好例子。
// ************************** 源代码 ************************
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<STYLE>.spanstyle {
COLOR: yellow; FONT-FAMILY: Verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>
<SCRIPT>
var x,y //鼠标当前在页面上的位置
var step=20 //字符显示间距，为了好看，step=0则字符显示没有间距，视觉效果差
var flag=0
var message="Welcome" //跟随鼠标要显示的字符串
message=message.split("") //将字符串分割为字符数组
var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}
for (i=0;i<=message.length-1;i++) { //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}
function makesnake() { //重定位每个字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
//这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1] //垂直坐标为前一字符的历史“垂直”坐标
//后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样，
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style") //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30) //设置30毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</SCRIPT>
</head>
<body bgColor=#000000 onload=makesnake()>
<p><font color="#FFFFFF">一个鼠标动态跟随文字特效的示例</font></p>
</body>
</html>
评论 (0) All
