如何使一個功能只在某個區域運行（div）

感謝這個論壇，我得到了我的代碼工作:-)但是它需要一些微調。該功能只適用於鼠標懸停在圖像上如何使一個功能只在某個區域運行（div）

這是我第一次嘗試使用懸停功能，但顯示鼠標座標時發生了一些奇怪的事情。你可以在這裏找到一個（舊的，但整個頁面上工作），例如：http://designbynine.nl/Test/Test%20pagina%20follow%20mouse04.html（在Chrome中打開）

<head> 

<script src="jquery-1.11.1.js"></script> 
<script type="text/javascript"> 
$(document).mousemove(function(event) { 

    var relativeX   = Math.ceil(event.pageX/23); 
    var currentStep   = relativeX*-230; 

    $(".model").hover(function(){ 
    $(".model").css("background-position", 0+" "+(currentStep)+"px"); 
    //just to check what is happeninga 
    $("span").text("X: " + event.pageX + ", Y: " + event.pageY) 
    }); 
}); 
</script> 

<style type="text/css"> 
.model { 
    width: 300px; 
    height: 230px; 
    background-image: url('sprite.png'); 
    background-position:0 4000x; 
} 
</style> 

</head> 


<body> 
<div class="model" style=""></div> 
<p>Data <span></span></p> 
</body>

來源

2014-10-17 Nine

你可以提供一個片斷或的jsfiddle？ – 2014-10-17 13:51:02

是這樣的：http://jsfiddle.net/ku5cfwp8/？ – dfsq 2014-10-17 13:51:05

http://jsfiddle.net/DesignbyNine/the1sjLm/1/ – Nine 2014-10-17 15:03:41

替換爲你的函數代碼這一個：

$(document).mousemove(function(event) { 

    var relativeX  = Math.ceil(event.pageX/123); 
    var widthOfElement = $(".model").outerWidth(); 
    var step   = widthOfElement/300; 
    var currentStep  = Math.ceil(relativeX/step*-231); 
    var hovering = false; 

    $("span").text("x" + event.pageX + " " + "y" + event.pageY); 
    $(".model").css("background-position", 0+" "+(currentStep)+"px"); 
     if(currentStep < 1) 
    { 
     currentStep = 1; 
    } 
});

我改變了功能（ e）在函數（事件）：

http://jsfiddle.net/ku5cfwp8/1/

來源

2014-10-17 14:18:17

謝謝，這是我寫的代碼更正確的編寫方式？我改變了它，代碼工作相同（仍然只在鉻）。我清理了一下代碼，並用.hover嘗試了一些東西，但是現在發生在鼠標的X座標上的奇怪事情。 – Nine 2014-10-17 14:57:04

清除瀏覽器緩存！該jsfiddle在我身邊的Firefox中工作正常... – 2014-10-17 15:08:07

如何使一個功能只在某個區域運行（div）

回答

相關問題