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);
    }
});

jQuery MouseMove

1 个答案: