Question

我有一个Javascript，可以从左到右滚动UL，具体取决于鼠标在其上的位置：可以看到一个演示HERE（网站仍在建设中）我希望它可以与触摸屏设备配合使用也。通过触摸和拖动＆＃34;一个手指会以类似的方式滚动UL，点击列表然后点击＆＃34;在图像上。

修改JS是多么容易/多难：

$(function(){
    $(window).load(function(){
        var $gal   = $("#gallerylist.top"),
            galW   = $gal.outerWidth(true),
            galSW  = $gal[0].scrollWidth,
            wDiff  = (galSW/galW)-1,  /// widths difference ratio
            mPadd  = 200,  // Mousemove Padding
            damp   = 20,  // Mousemove response softness
            mX     = 0,   // Real mouse position
            mX2    = 0,   // Modified mouse position
            posX   = 0,
            mmAA   = galW-(mPadd*2), // The mousemove available area
            mmAAr  = galW/mmAA;    /// get available mousemove fidderence ratio   
        $gal.mousemove(function(e) {
            mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
            mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
        });
        setInterval(function(){
            posX += (mX2 - posX) / damp; /// zenos paradox equation "catching delay"    
            $gal.scrollLeft(posX*wDiff);
        }, 10);
    });
});

Answer 1

有类似于鼠标事件的触摸事件：

$gal.touchstart(function(e) {});
$gal.touchend(function(e) {});
$gal.touchmove(function(e) {});

通常，您不需要实施触摸事件，因为他们通常已经同步了。

对于mousemove事件，从用户的角度来看，可能更希望在触摸设备上禁用此功能。如果页面需要滚动，则可能会干扰该交互。另一种方法是在窗口滚动事件上有一些动画。

基于mousemove的滚动脚本需要适应触摸屏的使用

1 个答案: