1

我有一个 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());
});
4

3 回答 3

4

尝试这个：

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/

于 2010-10-10T22:12:06.030 回答
0

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

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

如果您在某个地方有一个演示，那将非常有帮助......

于 2010-10-10T22:09:28.983 回答
0

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

完整说明见：

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

于 2010-10-10T22:28:12.657 回答