如何使用jQuery检测潜水器中间的40%

How to Detect 40% in the Middle of a Div Using jQuery

本文关键字：中间 潜水 何使用 jQuery 检测      更新时间：2023-09-26

请告诉我是否可以使用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>

感谢

只在左侧和右侧添加两个透明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>

添加两个子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/

试试这个：

$('#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;');
  }    
});
相关文章：