鼠标跟随特效
鼠标跟随鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动代码<style>body{height:5000px;}div{width:50px; height:50px; background:red; border-radius:50%; position:absolute;}</style>js 代码<script>window.onloa
·
鼠标跟随
鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动
代码
<style>
body{
height:5000px;
}
div{width:50px; height:50px; background:red; border-radius:50%; position:absolute;}
</style>
js 代码
<script>
window.onload = function(){
var body = document.body;
var fragment = document.createDocumentFragment();
for(var i = 0;i <10;i++){
var oDiv = document.createElement("div");
fragment.appendChild(oDiv);
}
body.appendChild(fragment);
body.onmousemove = function(evt){
var e = evt || window.event;
var oBox = document.getElementsByTagName("div");
function gen(obj,s){
setTimeout(function(){
obj.style.left = e.pageX + "px";
obj.style.top = e.pageY + "px";
},s)
};
/*
gen(oBox[0],100);
gen(oBox[1],200);
gen(oBox[2],300);
gen(oBox[3],400);
gen(oBox[4],500);
gen(oBox[5],600);
gen(oBox[6],700);
gen(oBox[7],800);
gen(oBox[8],900);
gen(oBox[9],1000);
*/
for(var k = 0;k < 10;k ++){
gen(oBox[k],(k + 1) * 100);
}
}
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)