当前位置: 代码迷 >> Web前端 >> 指定内容追随鼠标位置飘动
  详细解决方案

指定内容追随鼠标位置飘动

热度:116   发布时间:2012-10-09 10:21:45.0
指定内容跟随鼠标位置飘动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <script language="javascript" >
var content='ffffffffffffffffffffffff';
var length=content.length;
var xArr=new Array(length);
var yArr=new Array(length);
var step=20;
var x=0,y=0;
//初始内容存放位置
for(i=0;i<length;i++){
document.write('<div id=div'+i+' style="position:absolute;top:0;">'+content.charAt(i)+'</div>');
xArr[i]=i*step;yArr[i]=0;
}
function follow(){
//前+后-
xArr.unshift(x);xArr.pop();
yArr.unshift(y);yArr.pop();
for(i=0;i<length;i++){
var dv=document.getElementById('div'+i)
//y轴坐标相同,x轴保持一定间距
dv.style.left=xArr[i]+i*step;dv.style.top=yArr[i];
}
}
//监听鼠标位置
function getpos(event){
x=event.clientX;y=event.clientY+document.body.scrollTop;
}
//定时对数组unshift,pop操作,目的使数组中的每个元素相同
window.setInterval(follow,30);
  </script>
</HEAD>

<BODY onmousemove="getpos(event)" onscroll="getpos(event)">

</BODY>
</HTML>
  相关解决方案