js+css 文字跟随鼠标

midnightvip

浏览: 21364 次
性别:
来自: 无锡

最近访客更多访客>>

lol3721987

xingxingwml

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术类

CSS jQuery 算法 IE JavaScript

声明：本例转自《精通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>

分享到：

CSS 伪类 | js检测浏览器和操作系统

2010-08-13 09:32
浏览 1420
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js+css 文字跟随鼠标

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js+css 文字跟随鼠标

评论

发表评论

相关推荐

js正则

java操作json的通用类

一些有用的站点

struts2基本配置

Myeclipse的自动提示功能的设置

临时文件

CSS 伪类

js检测浏览器和操作系统

div设置滚动条和滚动条颜色

CSS 积累

J2EE 1.5 提供的另一种形式的for循环

缺包异常

js字符串函数

常用js代码

mysql中文问题

在javajee中搭建ssh

最近访客更多访客>>