如何使一个功能只在某个区域运行（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）

回答

相关问题