Question

我有一个宽度为980px的div元素，如果鼠标位于div的最后100个像素左右（我想滑动它），我希望能够触发事件。我已经知道如何滑动它，但是当鼠标在前100个像素中时，我无法做出告诉我的东西，因此它向左滚动或在880之后滚动，因此它可以向右移动。这是我的标记：

<div class="menuProductosNav">
    <ul>
        <li><a href="computadoras.html"><img src="assets/img/menuProductos/producto0.png" alt="" /></a></li>
        <li><a href="consumibles.html"><img src="assets/img/menuProductos/producto11.png" alt="" /></a></li>
        <li><a href="impresoras.html"><img src="assets/img/menuProductos/producto2.png" alt="" /></a></li>
        <li><a href="apple.html"><img src="assets/img/menuProductos/producto1.png" alt="" /></a></li>
        <li><a href="productos.html"><img src="assets/img/menuProductos/producto3.png" alt="" /></a></li>
        <li><a href="redescomu.html"><img src="assets/img/menuProductos/producto4.png" alt="" /></a></li>
        <li><a href="proyecciones.html"><img src="assets/img/menuProductos/producto5.png" alt="" /></a></li>
        <li><a href="accesorios.html"><img src="assets/img/menuProductos/producto6.png" alt="" /></a></li>
        <li><a href="energia.html"><img src="assets/img/menuProductos/producto7.png" alt="" /></a></li>
        <li><a href="refacciones.html"><img src="assets/img/menuProductos/producto8.png" alt="" /></a></li>
        <li><a href="software.html"><img src="assets/img/menuProductos/producto9.png" alt="" /></a></li>
        <li><a href="pdv.html"><img src="assets/img/menuProductos/producto10.png" alt="" /></a></li>
    </ul>
</div>

老实说，我迷失了，有人能告诉我怎么做吗？我能得到的就是元素的宽度：

var $nav = $('.menuProductosNav');
$nav.bind('mouseover',function(){
 alert($nav.width());
});

Answer 1

试试这个：

var $nav = $('.menuProductosNav');
var nav_width = $nav.width();
var THRESHOLD = 100;
$nav.bind('mouseover mousemove',function(e) {
    var offset = nav_width - (e.clientX - this.offsetLeft);
    console.log(offset);
    if(offset < THRESHOLD) {
      //mouse is within bounds...
      alert('within bounds');
    } 
});

工作示例：http://jsfiddle.net/XBnjJ/3/

Answer 2

也许您可以尝试使用绝对定位在该区域放置一个元素，并检测鼠标悬停在该区域上。当然，元素将是透明的div等。

另一种解决方案是使用jQuery检测鼠标位置，将其与div位置进行比较并触发幻灯片。但这会有点棘手。

如果您想在某个地方进行演示，那将非常有用......

Answer 3

在函数中使用事件和元素偏移量。

完整描述见：

http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html

如何使用jQuery查明鼠标是否在元素的某个部分上？

3 个答案: