Question

我正在尝试使用此功能解决移动和桌面问题。有没有办法使用我用于悬停的脚本并为Modernizr添加or运算符以查看它是否检测到触摸功能，如果没有，请使用悬停？希望有人可以帮我澄清一下。

$(function() {
        $('ul.recent-widget li').hover(function(){
            $(this).find('img').animate({top:'182px'},{duration:500});
        }, function(){
            $(this).find('img').animate({top:'0px'},{duration:500});
        });
    });

以下是适用于桌面http://jsfiddle.net/chris_s/dcq2F

的示例

Answer 1

使用Modernizr，您当然可以设置一个条件，正如您在上面的注释中所推断的那样，它只运行一个函数或另一个函数：

if ( Modernizr.touch ) {
   // click or bind to touchstart, touchmove, etc
} else {
   // hover (like your animation example)
}

关于性能，您可能还会考虑使用默认的css转换或动画，然后在该悬停功能上使用!Modernizr.csstransitions。

当然，移动设备是这样一个移动目标，there are caveats与任何一个解决方案。也许是对几个标准（屏幕尺寸，特征检测，polyfill等）进行组合测试，并选择最适合您情况的标准。

Modernizr - 触摸||将鼠标悬停在图像链接上

1 个答案: