本文实例讲述了JS实现的简单鼠标跟随DiV层效果。分享给大家供大家参考,具体如下:
这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动消失,不过还有些Bug,期待与大家完善这个JS特效。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
div {width:10px; height:10px; background:red; position:absolute;}
跟随鼠标的Div效果
window.οnlοad=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
setInterval(function(){
for(i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left=aDiv[i-1].style.left;
aDiv[i].style.top=aDiv[i-1].style.top;
}
},5);
document.οnmοusemοve=function (ev)
{
var oEvent=ev||event;
aDiv[0].style.left=oEvent.clientX+'px';
aDiv[0].style.top=oEvent.clientY+'px';
};
};
希望本文所述对大家JavaScript程序设计有所帮助。