当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript:一个鼠标动态跟随文字特效的示例

Javascript
JS getMonth()日期函数的值域是0-11
jQuery 处理网页内容的实现代码
jQuery 树形结构的选择器
jQuery 处理表单元素的代码
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
JavaScript 10件让人费解的事情
类似GMAIL的Ajax信息反馈显示
两个比较有用的Javascript工具函数代码
JavaScript Timer实现代码
JavaScript 学习技巧
JavaScript 题型问答有答案参考
js删除select中重复项的实现代码
javascript中的链式调用
JavaScript DOM学习第一章 W3C DOM简介
JavaScript DOM 学习第二章 编辑文本
JavaScript DOM 学习第三章 内容表格
JavaScript DOM学习第四章 getElementByTagNames
JavaScript DOM 学习第五章 表单简介
JavaScript DOM学习第六章 表单实例
JavaScript DOM 学习第七章 表单的扩展

No. « 287 288 289 290 »

技术文章搜索

关键字

Javascript 中的 JavaScript:一个鼠标动态跟随文字特效的示例

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 140 ::
收藏到网摘: 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>