鼠标跟踪动画

原创 2013年12月05日 22:13:44
<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="I love you"  //跟随鼠标要显示的字符串
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=black onload=makesnake()>

	


</body>

</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

qt creator 画点线,跟踪鼠标

今天主要研究如何在屏幕上绘制电线
  • LL1256
  • LL1256
  • 2014-06-27 13:29
  • 1407

目标(运动)跟踪

转自:http://blog.sina.com.cn/s/blog_4b700c4c01017wz5.html 一、引言  在需要监控的环境里,如何能够判断出进入特定区域的目标,并且能够跟踪目标的...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

屏幕鼠标跟踪 ScreenMouseTrack

ScreenMouseTrack.h#pragma once #include "stdafx.h" #include "ogre.h" #include "TranslateCoord.h" ...

OpenCV中blob_tracking目标跟踪分析

转自:http://www.opencvchina.com/forum.php?mod=viewthread&tid=1651 OpenCV VS提供了6组算法的接口,分别是:前景检测、新目标检测、...

目标跟踪--技术发展文献梳理--by香蕉麦乐迪

1. D. Jepson,D. J. Fleet, and T. F. El-Maraghi. Robust online appearance models for visualtracking. ...

鼠标滚轮滚动控制页面显示和页面动画

滚滚屏 动画 鼠标滚动 页面显示

笔记三(创建一个旋转动画)

这里创建一个旋转动画,表现为指向图标将随着鼠标的移动变化方向,且箭头始终指向鼠标位置。 文件结构: utils.js 文件代码(即是前两节函数封装代码):var utils = {}; //当...

计算机视觉、模式识别、机器学习常用牛人主页链接

http://blog.csdn.net/idismyself/article/details/16927865 牛人主页(主页有很多论文代码) Serge Belongie at...

目标跟踪运动跟踪视觉跟踪综述

目标跟踪是绝大多数视觉系统中不可或缺的环节。在二维视频跟踪算法中,基于目标颜色信息或基于目标运动信息等方法是常用的跟踪方法。从以往的研究中我们发现,大多数普通摄像头(彩色摄像头)下非基于背景建模的跟踪...

目标跟踪 浅谈

相信很多来到这里的人和我一样,都是想找一种比较好的目标跟踪算法,或者想对目标跟踪这个领域有个比较深入的了解,经典目标跟踪算法,可能我们并不需要那些曾经辉煌但已被拍在沙滩上的tracker,而是那些即将...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)