html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例

本文实例讲述了JS实现的简单鼠标跟随DiV层效果。分享给大家供大家参考，具体如下：

这段代码呈现一串跟随鼠标的Div效果，并有拖影特效，随着鼠标快速的晃动，Div层效果会不断的增加，后面的Div会自动消失，不过还有些Bug，期待与大家完善这个JS特效。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/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程序设计有所帮助。

html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例相关推荐

HTML选中时闪动效果代码,JS实现点击文字对应DIV层不停闪动效果的方法
本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错 ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...
html中导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色, ...
html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
常见的粒子动画js特效代码particles.js
下载地址基于canvas绘制particles.js插件实现的粒子动画特效,鼠标移动网页视差动画特效 dd:
html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
html背景边框特效代码,纯JS实现动态边框特效
HtmlCssJs ^-^正常的边框 ^-^更慢的边框 ^-^更快的边框 ^-^图片边框 ^-^更细的边框附赠的圆形 body { flex-wrap:wrap; flex:1 } .flex { ...
js模拟表单html形式,JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法: ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...

html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例

html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例相关推荐

最新文章

热门文章