jQuery MouseMove

Я хотел бы иметь изображение, которое меняется на три изображения, когда мышь перемещается влево и вправо от него.

  • Влево, чтобы показать стрелку влево, когда курсор находится слева
  • Центр, чтобы показать стрелку вверх, когда курсор находится в центре
  • Вправо, чтобы показать стрелку вправо, когда курсор находится справа

Я нашел скрипт 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);
    }

});​

Еще вопрос - При подведении мышки под картинку не работает. Можно ли как-то сделать так, чтобы он перемещался по всей странице?

Любая помощь будет принята с благодарностью.


jquery mousemove
person Authentic    schedule 14.12.2012    source источник
comment
Почему вы поместили x и y внутрь объекта mloc? все равно местный.   -  person techfoobar    schedule 14.12.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете сначала рассчитать процент позиции X, а затем применить к нему простую if.

i.e.:

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);
    }
});​​​
person techfoobar    schedule 14.12.2012