JQuery幻燈片圖像時懸停

Question

我想知道如何使一個8K寬度圖像移動到左側時，當我的鼠標指針（不是單擊圖像，只是懸停）在左側，並在它的右側時，它是在右側使用JQUERY，我不知道該效果的確切名稱，因此我在標題中使用了幻燈片圖像。如果有人知道如何做到這一點，我非常感謝它...在此先感謝那些想要幫助的人：D

Answer 1

可能有幾種方法可以做到這一點。關閉我的頭頂，我可能會在圖像div中有2個div（每個圖像的每個半部分都有1個div），然後使用jQuery懸停方法。根據鼠標http://docs.jquery.com/Tutorials:Mouse_Position

然後設置你的handlerIn和handlerOut功能：

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

Answer 2

你可以使用jQuery的「懸停」功能：http://api.jquery.com/hover/，使用jQuery的鼠標位置的能力，你可以在這裏找到結合在圖像上的位置。

Answer 3

有很多方法可以做到這一點，但這是我會做的。這是我會做的。

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

See in Action

Answer 4

您使用

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

你必須玩弄它，因爲這是我的頭頂。但是你需要的所有功能都應該在那裏。