- 浏览: 20376 次
- 性别:
- 来自: 无锡
最新评论
声明:本例转自 《精通JavaScript+jQuery》
<html> <head> <title>文字跟随鼠标</title> <style type="text/css"> <!-- body{ background-color:#004593; } .spanstyle{ color:#fff000; font-family:"Courier New"; font-size:18px; font-weight:bold; position:absolute; /* 绝对定位 */ top:-50px; } --> </style> <script language="javascript"> var x,y; //鼠标当前在页面上的位置 var step=10; //字符显示间距,为了好看,step=0则字符显示没有间距 var flag=0; var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串 message=message.split(""); //将字符串分割为字符数组 var xpos=new Array() //存储每个字符的x位置的数组 for (i=0;i<message.length;i++) { xpos[i]=-50; } var ypos=new Array() //存储每个字符的y位置的数组 for (i=0;i<message.length;i++) { ypos[i]=-50; } for (i=0;i<message.length;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将会使这些字符一个接一个的移动的新位置 // 该算法显示字符串就有点象人类的youxing(被和谐了。。)队伍一样, 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()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。 } document.onmousemove = handlerMM; </script> </head> <body onLoad="makesnake();"> </body> </html>
发表评论
-
js正则
2011-08-08 09:20 865一 javascript正则表达式的基本知识 1 j ... -
java操作json的通用类
2011-04-18 14:00 668package com.baiyyy.polabs.util. ... -
一些有用的站点
2011-04-10 10:09 612高质量图标搜索引擎 1.IconFinder 以简便并且有效的 ... -
struts2基本配置
2010-09-24 09:07 7911.web.xml <?xml version=&q ... -
Myeclipse的自动提示功能的设置
2010-09-01 16:06 1039仅作记录 1. 设置代码自动提示 window - ... -
临时文件
2010-08-30 10:36 652document.forms['editForm'].ac ... -
CSS 伪类
2010-08-13 09:38 705声明:本例转自 《精通JavaScript+JQuery》 ... -
js检测浏览器和操作系统
2010-08-13 09:25 2948<!DOCTYPE html PUBLIC &quo ... -
div设置滚动条和滚动条颜色
2010-08-07 17:41 721当div所定义的区域的内容达到一定程度时,在div标签里面嵌入 ... -
CSS 积累
2010-08-04 13:16 6501. button按钮设置背景图片,边角无空白 <i ... -
J2EE 1.5 提供的另一种形式的for循环
2010-07-14 10:38 748J2SE 1.5提供了另一种形式的for循环 ... -
缺包异常
2010-07-13 13:38 2358缺包异常: ------------------------- ... -
js字符串函数
2010-07-13 08:47 966JS自带函数 concat 将两个或多个字符的文本组合起来,返 ... -
常用js代码
2010-07-10 16:34 7441.去除字符串的空白符 ... -
mysql中文问题
2010-06-16 03:35 790解决MYSQL不支持中文的 ... -
在javajee中搭建ssh
2010-06-15 17:29 1370版本:struts1.2+hibernate3.3.1+spr ...
相关推荐
基于JS+CSS的鼠标移动跟随网页动画效果代码.zip
这是一款js+css3制作的可爱萌萌的猫头鹰头像动画特效,css猫头鹰眼睛跟随鼠标指针转动动画特效。
html+css+js实现canvas跟随鼠标的小圆特效源码 效果(源码在最后): 实现: 1.定义标签: 北极光之夜</h1> ; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式...
js闪电跟随鼠标运动特效,css+js+html实现web炫酷效果,必学前端源代码! js闪电跟随鼠标运动特效,css+js+html实现web炫酷效果,必学前端源代码! js闪电跟随鼠标运动特效,css+js+html实现web炫酷效果,必学前端源...
JS+CSS3与SVG实现的3D跟随鼠标感应悬浮动画特效源码.zip
HTML+css+JavaScript开发的特效 背景有爱心不断发散,变成透明的 鼠标移动时候也会有爱心跟随
鼠标移动到图片上会提示信息,信息可以根据鼠标移动。兼容各浏览器
css+js作出鼠标跟随提示................................
css3下划线跟随文字导航菜单特效是 一款个性的js css3下划线文字导航菜单特效代码,鼠标经过导航文字时显示下划线效果,还可以改变颜色。
CSS3 jQuery鼠标跟随图片悬停效果,能够判断鼠标移入的方向,遮罩可以按移入的方向出现,也可以从反方向出现,可设定延迟值。兼容主流浏览器
目前,研究人员已经发现了一种新方法,利用HTML和CSS来跟踪网站访问者的鼠标移动,还可以绕过跟踪保护。 1 新攻击技术 大多数在线跟踪是通过加载到网站和广告中的JavaScript脚本完成的,这允许广告商和网站跟踪您...
跟随鼠标旋转的流星.rar跟随鼠标旋转的流星.rar跟随鼠标旋转的流星.rar跟随鼠标旋转的流星.rar跟随鼠标旋转的流星.rar跟随鼠标旋转的流星.rar
NULL 博文链接:https://272426068.iteye.com/blog/1198016
这是一款炫酷js和CSS3鼠标跟随图片序列动画特效。该特效在鼠标移动时,会在鼠标的运动轨迹后面跟随一组图片,同时还提供多种图片隐藏效果。
一款个性的js+css3下划线文字导航菜单特效代码,鼠标经过导航文字时显示下划线效果,还可以改变颜色。
这是一款js css3制作的可爱萌萌的猫头鹰头像动画特效,css猫头鹰眼睛跟随鼠标指针转动动画特效。
代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; ...// Move points over time ..._this.radians = _this.velocity;..._this.lastMouse.x = (mouse.x - _this.lastMouse.x) * ...
js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母跟随鼠标运动特效,绚丽3D运动,前端小白必看! js实现海洋中水母...