鼠标跟踪动画

原创 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>



CSS3实现一个鼠标跟随动态旋转效果

技术点:CSS3里的3D旋转实现这个效果需要对CSS3的3D旋转还有对JQuery有一定的认识,因为这是本效果具体使用到的技术;这里不去详细讲解这两个基础知识点,只讲具体实现思路以及实现代码。 ...
  • dydjtb
  • dydjtb
  • 2017年07月21日 17:25
  • 663

【Android开发】范例1-实现跟踪鼠标单击状态的图片按钮

在Android中实现手指点击图片按钮与不点击图片按钮的时候,按钮的颜色或样式不一样,给用户一种按钮被按下并切换的感觉,提高用户体验。 实现效果如图: 手指按按钮之前 手指按按钮瞬间: 具体实...
  • u013517797
  • u013517797
  • 2015年04月02日 16:27
  • 1105

opencv实现跟踪鼠标选取的目标

简介   本篇讲解opencv video鼠标选中的物体跟踪,使用的是opencv提供的calcOpticalFlowPyrLK。 calcOpticalFlowPyrLK介绍   voi...
  • u011630458
  • u011630458
  • 2015年05月24日 10:50
  • 2464

【Python+OpenCV】目标跟踪-卡尔曼滤波-鼠标轨迹跟踪

卡尔曼是匈牙利数学家,Kalman滤波器源于其博士毕业了论文和1960年发表的论文《A New Approach to Linear Filtering and Prediction Problems...
  • lwplwf
  • lwplwf
  • 2017年07月04日 10:59
  • 1590

基于css3的鼠标移动动画显示效果

基于css的鼠标经过动画显示详情特效。这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: ​​​​​ html代码:             基于css3的鼠标...
  • u010187139
  • u010187139
  • 2014年12月26日 19:42
  • 1376

QT mouseMoveEvent事件(qmainwindow内追踪鼠标事件事件)

最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下。         在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMo...
  • yu132563
  • yu132563
  • 2016年11月03日 23:47
  • 3961

鼠标滑动到当前页面触发动画效果

近年来,关于鼠标滑动到当前页面从而触发动画效果十分的火热,今天我们就来学习下这一效果。 一、首先,我们先来了解一下这一效果实现的原理 1.一个网页离不开基本的布局,所以首先就是要先用htm...
  • u013558749
  • u013558749
  • 2015年06月17日 15:01
  • 6694

JS动画——制作鼠标移入移出的时候控件属性的变化

anim4.html ul,li{ list-style: none; } ul li { width: 200px; ...
  • u014520745
  • u014520745
  • 2016年01月30日 14:15
  • 743

canvas+javascript动画初级应用-鼠标捕捉跟随

canvas+javascript初级应用 来源于html5+javascript动画基础这本书。重原理轻代码,个人感觉比较适合了解了js基本,但是又无法独立写东西的同学食用。css部分就没上了。。...
  • w812083
  • w812083
  • 2016年12月10日 15:07
  • 404

qt creator 画点线,跟踪鼠标

今天主要研究如何在屏幕上绘制电线
  • LL1256
  • LL1256
  • 2014年06月27日 13:29
  • 1827
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标跟踪动画
举报原因:
原因补充:

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