如何使用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;');
  }    
});