如何使用 jQuery 判断鼠标是否位于元素的特定部分上？

发布于 2024-09-26 17:38:18 字数 2057 浏览 0 评论 0原文

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

原文

I have a div element that is 980px wide and I'd like to be able to trigger an event if the mouse is in the last 100 pixels or so of the div (I want to slide it). I already know how to slide it, but I haven't been able to make something that tells me when the mouse is either in the first 100pixels so it scrolls left or after the 880 so it can go right. This is my markup:

<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>

I honestly am lost at this, could anyone let me know how to do this? all I can get is the element's width:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海未深 2024-10-03 17:38:18

试试这个：

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/

Try this:

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');
    } 
});

Working example: http://jsfiddle.net/XBnjJ/3/

回复收藏 0 原文