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

场景

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

触发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部分代码修改如下：文章来源地址https://www.toymoban.com/news/detail-485399.html

$(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)
        })
       })

到了这里，关于图片跟随鼠标移动效果的抖动问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！