Question

我正在使用的JS脚本使用鼠标悬停在一些图像上创建视差效果。鼠标离开悬停区域后，图像将保留在最后位置，直到用户重新进入悬停区域 - 这会使图像捕捉到新的鼠标位置。

我一直在尝试修改脚本以在原点位置启动图像，然后在检测到鼠标悬停时平滑地动画到鼠标位置，在离开后再次返回到原点。我对任何疯狂的解决方案持开放态度，我也尝试利用CSS动画无济于事。

JS：

$(document).ready(function ( $ ) {
    $.fn.extend({

        mouseParallax: function(options) {

            var defaults = { moveFactor: 5, zIndexValue: "-1", targetContainer: 'body' };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o = options;
                var background = $(this);

                $(o.targetContainer).on('mousemove', function(e){

                    mouseX = e.pageX;
                    mouseY = e.pageY;

                    windowWidth = $(window).width();
                    windowHeight = $(window).height();

                    percentX = ((mouseX/windowWidth)*o.moveFactor) - (o.moveFactor/2);
                    percentY = ((mouseY/windowHeight)*o.moveFactor) - (o.moveFactor/2);

                    leftString = (0-percentX-o.moveFactor)+"%";
                    rightString = (0-percentX-o.moveFactor)+"%";
                    topString = (0-percentY-o.moveFactor)+"%";
                    bottomString = (0-percentY-o.moveFactor)+"%";

                    background[0].style.left = leftString;
                    background[0].style.right = rightString;
                    background[0].style.top = topString;
                    background[0].style.bottom = bottomString;
                    if(o.zIndexValue) { 
                        background[0].style.zIndex = o.zIndexValue;
                    }
                });
            });
        }                   
    });

  $('#background').mouseParallax({ moveFactor: 5 });
    $('#foreground').mouseParallax({ moveFactor: 10 });
    $('#fore-foreground').mouseParallax({ moveFactor: 15 });
    $('#fore-fore-foreground').mouseParallax({ moveFactor: 20 });

    $('body').height(3000);

} (jQuery) );

小提琴：https://jsfiddle.net/zj9djopm/2/

Answer 1

尝试重置mouseout事件的位置。

$(o.targetContainer).on('mouseout', function(e){
    background[0].style.left = 0
    background[0].style.right = 0;
    background[0].style.top = 0;
    background[0].style.bottom = 0;
});

jsfiddle.

希望它会有所帮助

Answer 2

尝试利用jQuery为您提供的.animate属性，而不是简单地让它们对齐。

这样的事情应该有效：

$(o.targetContainer).on('mouseout', function(e){
  $(background[0]).animate({
    left: "0",
    right: "0",
    top: "0",
    bottom: "0"
  });
});

同样，对于mouseenter状态，你必须再次做同样的事情。

鼠标离开div后，将图像设置为原始位置

2 个答案: