jQuery MouseMove

Question

我想要一个图像，当鼠标被移动到它的左边和右边时，它会变成三个图像。

• 当光标位于左侧时，向左显示左箭头
• 当光标位于中心时，中心显示向上箭头
• 当光标位于右侧时，右显示右箭头。

我找到了一个工作良好的jQuery脚本。我编辑了它一点，并让它显示左右箭头时，鼠标被移动。我只剩下中间部分要做了，我不知道该怎么添加。

这是我所拥有的。(另见jsFiddle页面：http://jsfiddle.net/WhkJB/ )

var image_src = {
    left: "http://i.imgur.com/ubKrq.jpg",
    right: "http://i.imgur.com/SxHCS.jpg",
};

$(document).mousemove(function(event){
    var mloc = {
        x: event.pageX,
        y: event.pageY
    };

    if( 
        (mloc.x >= 0 && mloc.x <= $(document).width()/2 )
    ){
        $(".arrow").attr("src", image_src.left);
    }else if( 
        (mloc.x >= $(document).width()/2 && mloc.x <= $(document).width()) &&
        (mloc.y >= 0 && mloc.y <= $(document).height()/2)
    ){
        $(".arrow").attr("src", image_src.right);
    }

});​

另一个问题--当你把鼠标移到图像下方时，它就不起作用了。不管怎么说，这样它就可以在整个页面上移动了吗？

任何帮助都将不胜感激。

Answer 1

您可以首先计算X位置百分比，然后对其应用一个简单的if。

即：

var image_src = {
    left: "http://i.imgur.com/ubKrq.jpg",
    right: "http://i.imgur.com/SxHCS.jpg",
    up: "http://i.imgur.com/SxHCS.jpg" // replace with UP image
};

$(document).mousemove(function(event){
    var xPercent = (event.pageX / $(document).width()) * 100;
    if(xPercent <= 40) { // show left
        $(".arrow").attr("src", image_src.left);
    }
    else if(xPercent >= 60) { // show right
        $(".arrow").attr("src", image_src.right);
    }
    else { // show up
        $(".arrow").attr("src", image_src.up);
    }
});​​​