如何用jQuery实现鼠标移出时移动的背景图片复位到初始位置

你只需要在原有插件逻辑里补充初始位置存储和鼠标移出事件监听即可，修改后的完整代码如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
(function($){
    $.fn.backgroundMove=function(options){
        var defaults={
            movementStrength:'50'
        },
        options=$.extend(defaults,options);

        var $this = $(this);
        // 存储元素初始背景位置
        var initialBgPos = $this.css('background-position');

        var movementStrength = options.movementStrength;
        var height = movementStrength / $(window).height();
        var width = movementStrength / $(window).width();
        
        $this.mousemove(function(e){
            var pageX = e.pageX - ($(window).width() / 2);
            var pageY = e.pageY - ($(window).height() / 2);
            var newvalueX = width * pageX * -10;
            var newvalueY = height * pageY * -10;
            // 修复原有代码中坐标值缺少空格的问题
            $this.css("background-position", newvalueX+"px " + newvalueY+"px");
        });

        // 补充鼠标移出复位逻辑
        $this.mouseleave(function(){
            $this.css("background-position", initialBgPos);
        });
    }
})(jQuery);
</script>

<script type="text/javascript">
$(function() {
    $('.item').backgroundMove({
        movementStrength:'50'
    });
});
</script>

关键改动说明 #

• 初始化插件时自动读取当前元素的原生background-position值存储，不需要硬写固定复位值，兼容不同初始样式的元素
• 绑定mouseleave事件，鼠标移出元素时自动把背景位置恢复为初始值
• 修复了原有代码中拼接背景位置坐标时缺少空格的语法错误，避免部分浏览器识别样式失败

内容的提问来源于stack exchange，提问作者So SWXI