1

I want to know how to make an 8k width image to move to left when my mouse pointer(not clicking the image, just hover) is in the left side and move to right when it is in the right side using JQUERY, I dont know what the exact name for that effect so i used slide image in the title. if anyone knows how to do this i very much appreciate it... Thanks in advance for those who want to help :D

4

4 回答 4

0

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

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

于 2012-08-13T18:15:29.540 回答
0

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

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

见效

于 2012-08-13T18:16:28.240 回答
0

你找到鼠标的位置使用

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

您将不得不玩弄它，因为这完全不在我的脑海中。但是您需要的所有功能都应该在那里。

于 2012-08-13T18:20:25.750 回答
0

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

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

于 2012-08-13T18:03:53.977 回答