Question

感谢这个论坛，我得到了我的代码:-)但是它需要一些微调。该功能仅在鼠标悬停在图像上时才起作用

这是我的第一次尝试，使用悬停功能，但是在显示鼠标坐标时会发生一些奇怪的事情。您可以在此处找到（旧的但在整个页面上工作）示例：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>

Answer 1

用以下代码替换您的功能代码：

    $(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/

如何使函数仅在某个区域运行（div）

1 个答案: