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 に答える