JS简单实现鼠标跟随

html代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>鼠标跟随</title><style type="text/css">div{width: 10px;height: 10px;background: skyblue;position: absolute;}</style></head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body>
</html>

js代码：

<script type="text/javascript">var oDiv = document.querySelectorAll("div");//获取dom元素(集合)document.onmousemove = function(e){//鼠标移动事件var evt = e || event;//获取事件源var x = evt.clientX;//获取鼠标位置var y = evt.clientY;oDiv[0].style.left = x+"px";//第一个div的left值oDiv[0].style.top = y+"px";//第一个div的top值for(var i = oDiv.length-1; i >= 1; i-- ){  oDiv[i].style.left =oDiv[i-1].style.left;//i-1个div的left值赋给第i个div的left，这就实现了后一个div跟随前一个div移动oDiv[i].style.top = oDiv[i-1].style.top;//同理}   }</script>

代码运行结果为：

JS简单实现鼠标跟随相关推荐

php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)
这篇文章主要介绍了JS实现的鼠标跟随代码,带有卡通手型点击效果.涉及JavaScript鼠标事件的响应与页面元素的动态调用技巧,需要的朋友可以参考下,具体如下: 一个跟随鼠标的小手效果,鼠标移在哪里, ...
JQuery实现一个简单的鼠标跟随提示效果
效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本将创建 ...
js简单实现鼠标拖拽功能：盒子可以跟着鼠标移动位置
实现的原理: 根据上面的图可以算出移动后的盒子的left和top: 鼠标距离边界的值: ev.pageY - box.top ev.pageX - box.left box2.top = ev2.pa ...
怎么给html增加鼠标跟随,js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
php鼠标跟随特效,JS实现鼠标跟随特效
这次给大家带来JS实现鼠标跟随特效,JS实现鼠标跟随特效的注意事项有哪些,下面就是实战案例,一起来看一下. 以下是经过小编测试后的全部代码: 鼠标跟随十字JS特效代码 // var ox = docu ...
【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要:元素的left位置 = 鼠标当前 ...
卡通猫咪鼠标跟随动态js特效
下载地址一款卡通猫咪鼠标跟随动态特效,该特效实现了猫咪眼睛跟随鼠标移动的动画效果,可用作网页插画.网页背景等 dd:

JS简单实现鼠标跟随

JS简单实现鼠标跟随相关推荐

最新文章

热门文章