對於網站：如何使圖像僅在某個區域中跟隨鼠標指針？

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

您需要獲取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)

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