基於方向的鼠標懸停翻轉圖像

有沒有辦法讓這個腳本根據指針的方向切換圖像？基於方向的鼠標懸停翻轉圖像

例如，如果您有魚，並將鼠標移動到魚的右側，它會切換到面向該方向的圖像。當你將指針移動到魚的左邊時，它會以另一種方式指向它。

JAVASCRIPT

$("#foo").mousemove(function(event) { 
    $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300) 
});

HTML

<div id="foo"> 
<div id="bee1">MoveMe</div> 
</div>

CSS

#foo{ 
    height:500px; 
    width:400px; 
} 
#bee1{ 
    position:absolute; 
    border:1px solid #ccc; 
}

來源

2013-02-02 Jen

我建議保存'$（ '＃bee1' ）全局變量中的元素。每次移動鼠標時，您都不希望JavaScript在該特定元素的dom中搜索。 –

$("#foo").mousemove(function(event) { 
     var bee = $("#bee1"); 
     var position = bee.position(); 
     var mousey = event.pageX; 


    if(position.left > mousey) { 
     $("#bee1").html("left"); 
    } else { 
     $("#bee1").html("right"); 
    } 

     $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300); 
});

來源

2013-02-02 23:53:58 Rhymond

這很好，非常感謝。我用圖像代碼取代了「左」和「右」，它正在做我想做的事。 – Jen

您的歡迎:) – Rhymond

只是檢查是否當前鼠標的位置x大於圖像位置更大，改變你的形象src相應：

$("#foo").mousemove(function(event) { 
    var mousePos = {x: event.pageX, y: event.pageY}, 
     elPos = imgEl.offset(); 
    if(mousePos.x > elPos.left){ 
     direction = '-->'; 
    } 
    else{ 
     direction = '<--'; 
    } 
    imgEl.text(direction); 
    imgEl.stop().animate({left: event.pageX, top: event.pageY}, 300) 
});

http://jsfiddle.net/WfQwZ/

來源

2013-02-02 23:54:12 dmk

基於方向的鼠標懸停翻轉圖像

回答

相關問題