Question

我对网页设计和javascript都很陌生，所以请耐心等待。

我想在鼠标指针旁边显示一个图像，但只有当它移动到我网站的某个区域时才会显示。

到目前为止，我已经学会了如何使用此方法使图像跟随鼠标指针：

//(html)
<img id="image" src="image.jpg"/>

//(css)
#image{
position:absolute;
} 

//(js)
$(document).mousemove(function(e){
    $("#image").css({left:e.pageX, top:e.pageY});
});

有人可以向我解释如何将此限制在网站的某个区域，并在鼠标指针位于此区域外时隐藏图像吗？

Answer 1

var
    hoverBox   = $('.box-selector'),
    hoverImage = $('#image');

hoverBox.mousemove(function(e) {
    hoverImage.css({
        left: e.pageX,
        top:  e.pageY
    });
}).mouseout(function() {
    hoverImage.css({
        left: -10000,
        top:  -10000
    });
});

Answer 2

为什么不在mousemove事件中进行检查？

$(document).mousemove(function(e){
    if (e.pageX > MINX && e.pageX < MAXX && e.pageY > MINY && e.pageY < MAXY) {
        $("#image").css({left:e.pageX, top:e.pageY});
    }
});

Answer 3

这个怎么样？ JsFiddle

那么如何使用这个HTML结构呢。追踪器是您放置图像的div，容器界定您跟随鼠标的区域。

  <div class="container">
     <div class="chaser"></div>
  </div>

考虑一下这个问题。你可以在哪里移动和改变容器的大小。

div.container {
  margin: 50px 20px;
  height : 200px;
  width: 200px;
  border: 1px solid gray;
  background-color: gray;
}

div.container > div.chaser{
   height : 5px;
    width: 5px; 
  border: 1px solid white;
  background-color: white;
}

你需要获得pageX和PageY，如@Deep所述。如果您打算移动容器，那么您还应该考虑div.container的位置。当您最终获得相对于容器的位置时，则更新追踪器的位置。

(function($){
    $(document).ready(function(){
    $('div.container')
    .on('mouseenter', followMe)
    .on('mouseleave', hideChaser);

  });

  function followMe(){
        $(this).on('mousemove', function(e){
            var chaser = $('div.chaser') ; 
            var container = $(this);
            var position = container.position();
            var xpos, ypos;            
               console.log("Client("+e.clientX+","+e.clientY+"),Page("+e.pageX+","+e.pageY+")"); 
           xpos = e.pageX - position.left; //get relativePos
           ypos = e.pageY - position.top; //get relativePos
           chaser.css({
            display: 'block',
            position: 'absolute',
            left: xpos,
            top: ypos
           });  
      })
  }

  function hideChaser(){
    $('div.chaser').css({
      display: 'none'
    }); 
  }

})(jQuery)

＆＃13;

(function($) {
  $(document).ready(function() {
    $('div.container').on('mouseenter', followMe)
      .on('mouseleave', hideChaser);

  });

  function followMe() {
    $(this).on('mousemove', function(e) {
      var chaser = $('div.chaser');
      var container = $(this);
      var position = container.position();
      var xpos, ypos;

      console.log("Client(" + e.clientX + "," + e.clientY + "),Page(" + e.pageX + "," + e.pageY + ")");
      xpos = e.pageX - position.left;
      ypos = e.pageY - position.top;
      chaser.css({
        display: 'block',
        position: 'absolute',
        left: xpos,
        top: ypos
      });
    })
  }

  function hideChaser() {
    $('div.chaser').css({
      display: 'none'
    });
  }

})(jQuery)

＆＃13;

div.container {
  margin: 50px 20px;
  height: 200px;
  width: 200px;
  border: 1px solid gray;
  background-color: gray;
}
div.container > div.chaser {
  height: 5px;
  width: 5px;
  border: 1px solid white;
  background-color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">

  <div class="chaser">

  </div>
</div>

＆＃13;

对于网站：如何使图像仅在某个区域中跟随鼠标指针？

3 个答案: