图片跟随鼠标移动效果的抖动问题

场景

图片跟随鼠标移动效果的实现思路：

触发mousemove事件响应时，通过e.offsetX,e.offsetY获取到当前鼠标的位置。再修改图片的css样式中的top, left属性（图片采用绝对定位）。
代码如下：

<div id="angel"><img src="./img/angel.gif" alt="" >        </div>

 $(function(){var img = $("#angel")var timer = null$(document).mousemove(function(e){img.css({// top:e.pageY,// left:e.pageX,top:e.offsetY,left:e.offsetX})})})

   *{margin:0;padding:0;box-sizing: border-box;            }body,html{overflow:hidden;}#angel{position:absolute;display: inline-block;width: 96px;height: 80px;background-color: pink;}#angel img{width: 100%;height: 100%;}

分析问题原因

offset是相对于事件源而言的，即，鼠标在哪个元素上移动，事件的offset属性就是相对于哪个元素而言。

鼠标移动时，由于图片移动得比鼠标慢，所以鼠标容易移动到图片的上方（一般是偏左上的位置），事件源在图片左上角时，offset值会猛然缩小；但
紧接着图片又随着鼠标移动到了右下方，而鼠标往右或下方向移动时，offset值又会因上述原因，如之前那样猛增猛减。

而图片的位置是相对于body而言的。body位置固定，而top, left的值随着offset值猛增猛减，其位置也随之不停抖动。
情况见下图（这里设置了背景色，方便看清图片的有效作用范围）：
![请添

使用offset时，浏览器渲染效率貌似也不太高。

解决方法

offsetX，offsetY用pageX,pageY代替.

图片跟随鼠标移动的其他问题

节流

增加一个定时器，单位时间内更新图片位置，即图片移动得慢一点。
js部分代码修改如下：

$(function(){var img = $("#angel")var timer = null$(document).mousemove(function(e){            if(timer !== null){return }timer = setTimeout(function(){img.css({top:e.pageY,left:e.pageX,})clearTimeout(timer)timer = null},16)})})

图片跟随鼠标移动效果的抖动问题相关推荐

利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错.虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考.先看一下效果图!这个是可以跟 ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
图片跟随鼠标移动案例
文献种类:专题技术总结文献开发工具与关键技术: DW前端技术作者:彭学员 :年级:2004 :撰写时间:2021 年 5 月 17日文献编号: ...
html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
实现图片跟随鼠标移动
下面代码可以实现图片跟随鼠标移动 <html> <head><meta charset="utf-8"><title></ti ...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
终于解决！图片随鼠标移动在FireFox下实现，另附一个好玩的图片随鼠标伸缩效果
不用left/top处理(用padding代替): <html> <head> <script type="text/javascript"> ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
图片跟随鼠标样式跟随效果（附完整代码及效果）
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...