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

最新推荐文章于 2021-06-22 11:47:05 发布

iteye_7664

最新推荐文章于 2021-06-22 11:47:05 发布

阅读量188

点赞数

分类专栏： web 文章标签： HTML

web 专栏收录该内容

9 篇文章 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 οnmοusemοve="getpos(event)" οnscrοll="getpos(event)">

</BODY>
</HTML>