您的位置：首页 > Web前端 > JavaScript

JavaScript实现跟随鼠标移动而移动的文字

2014-03-26 10:35 756 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>跟随鼠标的文字</title>
<style type="text/css">
.spanstyle
{
position: absolute;
visibility: visible;
top: -50px;
font-size: 9pt;
color: #FF6600;
font-weight: bold;
}
</style>
<script language="javascript">
//设定参数
var x, y; //鼠标当前在页面上的位置
var step = 20; //字符显示间距，为了好看，step=0则字符显示没有间距，视觉效果差
var flag = 0;
var message = "javascript跟随鼠标的文字."; //跟随鼠标要显示的字符串
message= message.split(""); //分割字符串
var xpos = new Array();
for(i=0; i<=message.length-1; i++) {
xpos[i] = -50;
}
var ypos = new Array(); //分割字符串
for(i=0; i<=message.length-1; i++) {
ypos[i] = -50;
}
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;
for(i=0; i<message.length-1; i++) { //动态生成显示每个字符span标记
var thisspan = eval("span" + (i) + ".style");
thisspan.posLeft = xpos[i];
thisspan.posTop = ypos[i];
}
}
else if (flag == 1 && document.layers) {   //Netscape
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); //使用setTimeout延时执行makesnake函数
//setTimeout("makesnake()",30); 也可以
}
</script>
</head>
<body onLoad="makesnake()">
<center>
<h1>跟随鼠标的文字</h1>
<hr>
<br>
<script language="javascript">
for(i=0; i<=message.length-1; i++) { //创建跟随文字的各个标签
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span" + i + "'class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
if(document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM; //给document对象的onmousemove事件赋上handlerMM函数
</script>
</center>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航