Question

我想知道当我的鼠标指针（不是单击图像，只是悬停）在左侧时，如何使8k宽的图像向左移动，当使用JQUERY时，它在右侧移动到右边，我不知道该效果的确切名称，所以我在标题中使用了幻灯片图像。如果有人知道该怎么做我非常感谢...提前感谢那些想要帮助的人：D

Answer 1

可能有几种方法可以做到这一点。在我的头顶，我可能在图像div中有2个div（图像的每一半为1），然后使用jQuery悬停方法。

http://api.jquery.com/hover/

Answer 2

您可以使用jQuery的'悬停'功能：http://api.jquery.com/hover/，结合jQuery的鼠标位置功能，您可以在此处找到：http://docs.jquery.com/Tutorials:Mouse_Position

然后根据图像上的鼠标位置设置handlerIn和handlerOut函数。

Answer 3

有很多方法可以做到这一点，但这就是我要做的。这就是我要做的。

<script type='text/javascript'>
$(document).ready(function(){
    $('#cross-img').hover(function(){
        $(this).css('margin-left', '-8px');
            }, function() {
        $(this).css('margin-left', '0');
    });
});
</script>

See in Action

Answer 4

使用

找到鼠标的位置

$('img').mousemove(function(event){
    var horizontalMousePosition = event.pageX;
});

然后将其与图片在页面上的位置进行比较

var leftEdge = $('img').offset().left //Left edge
var rightEdge = $('img').offset().left + $('img').innerWidth(); //Right edge
var middle = rightEdge - leftEdge;

然后，如果鼠标位置“小于”图像一半的位置（即左侧），那么我们将其向左移动：

if(horizontalMousePosition < middle){
    $('img').css({
        position: 'relative',
        left: -=50px
    });
}

你必须玩弄它，因为这完全不是我的头脑。但是你需要的所有功能都应该存在。

悬停时的JQuery幻灯片图像

4 个答案: