如何使用jQuery檢測Div中間的40％

Question

您能否讓我知道是否有可能使用jQuery來檢測Div中間的40％，例如，在以下示例中，我只需要在左側30％或右側30％上啟用mousemove()中心。

 $('#box-wrap').mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; console.log("X: " + x + " Y: " + y); }); 

 html, body{ width:100%; height:100; } #box-wrap{ height:400px; width:100%; background:yellow; } 

 <div id="box-wrap"></div> 

謝謝

Answer 1

如何添加兩個子div並在其上調用.mousemove()呢？

<div id="box-wrap">
    <div id="left_30"></div>
    <div id="right_30"></div>
</div>

#left_30 {
    position: absolute;
    width: 30%;
    height: 100%;
}

#right_30 {
    position: absolute;
    width: 30%;
    height: 100%;
    right: 0px;
}

查看此工作提琴： https : //jsfiddle.net/qeaxu9c9/2/

Answer 2

僅在左側和右側添加兩個透明的div作為覆蓋，並使鼠標移動事件僅在這些位置上。 我剛剛添加了一個紅色邊框以使其可見：

 $('.sensor').mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; console.log("X: " + x + " Y: " + y); }); 

 html, body{ width:100%; height:100; } #box-wrap{ height:400px; width:100%; background:yellow; } .sensor { width:30%; height: 100%; border: 1px solid red; background-color: transparent; cursor: pointer; } .left { position:absolute; left: 0px; top: 0px; } .right{ position:absolute; right: 0px; top: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="box-wrap"> <div class="left sensor"></div> <div class="right sensor"></div> Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem Lorem Ipsum dolor sit anem .... </div> 

Answer 3

嘗試這個：

$('#box-wrap').mousemove(function(e){
  var t = $(this), w = t.height(), h = t.width(), os = t.offset();
  var x = e.pageX - os.left, y = e.pageY - os.top;
  console.log("X: " + x + " Y: " + y);
  if(x >= w * 0.3 && x <= w * 0.7 && y >= h * 0.3 && y <= h * 0.7){
    console.log('Inner 40&#037;');
  }    
});