JS实现的简单鼠标跟随差异层效果完整实例
本文实例讲述了射流研究…实现的简单鼠标跟随差异层效果。分享给大家供大家参考,具体如下:
这段代码呈现一串跟随鼠标的差异效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的差异会自动消失,不过还有些Bug,期待与大家完善这个射流研究…特效。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-simple-mouse-over-div-codes/
具体代码如下:
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' headstylediv { width 336010 px;高度:10px背景:红色;位置:绝对;}/style meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8' /title跟随鼠标的差异效果/title脚本窗口。onload=function(){ var ADiv=document。getelementsbytagname(' div ');var I=0;setInterval(函数(){ for(I=ADiv。长度-1;i0;I-){ ADiv[I]。风格。left=ADiv[I-1]。风格。向左;ADiv[I]。风格。top=ADiv[I-1]。风格。顶部;} },5);文件。onmousemove=function(ev){ var oEvent=ev | | event;aDiv[0]。风格。left=oevent。客户端x ' pxaDiv[0]。风格。top=oevent。client y“px”;};};/script/headsdydiv/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div/div希望本文所述对大家Java脚本语言程序设计有所帮助。
版权声明:JS实现的简单鼠标跟随差异层效果完整实例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。