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

Javascript
JQuery 获取和设置Select选项的代码
jQuery ctrl+Enter shift+Enter实现代码
jQuery学习2 选择器的使用说明
jQuery学习3：操作元素属性和特性
jQuery学习4 浏览器的事件模型
jQuery学习5 jQuery事件模型
jQuery 学习6 操纵元素显示效果的函数
jQuery学习7 操作JavaScript对象和集合的函数
jQuery库与其他JS库冲突的解决办法
JavaScript Event事件学习第一章 Event介绍
JavaScript Event学习第二章 Event浏览器兼容性
JavaScript Event学习第三章 早期的事件处理程序
JavaScript Event学习第四章 传统的事件注册模型
JavaScript Event学习第五章 高级事件注册模型
JavaScript Event学习第六章 事件的访问
JavaScript Event学习第七章 事件属性
JavaScript Event学习第八章 事件的顺序
js png图片(有含有透明)在IE6中为什么不透明了
JavaScript 读取元素的CSS信息的代码
基于mootools的圆角边框扩展代码

No. « 284 285 286 287 »

技术文章搜索

关键字

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

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