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

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>

并考虑这个 css。您可以在何处移动和更改容器的大小。

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;
}

如@Deep 所述，您需要获取 pageX 和 PageY。如果您打算移动容器，那么您还应该考虑 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)

(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)

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;
}

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

  <div class="chaser">

  </div>
</div>

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

For a website: How do I make an image follow the mouse pointer only in a certain area?

html

javascript

jquery

image

mouseevent