gpt4 book ai didi

javascript - 如何使用 Modernizr 测试是否支持关键帧?

转载 作者:行者123 更新时间:2023-11-28 01:26:25 26 4
gpt4 key购买 nike

我想测试浏览器是否支持关键帧。所以我找到了this .

但是我真的很困惑如何使用?

Modernizr.addTest("keyframes", function(){
//your test code without adding a support class || this will be done by Modernizr
return [boolean]; // return true if it is supported or false if it is not supported
});
if(Modernizr.addTest()){
alert('supports');
}
<小时/>

我像这样使用它,但它在所有浏览器中添加了该类:

Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
if($("html").hasClass('no-keyframe')){
alert('test');
}

最佳答案

Modernizr是一个用于特征检测的javascript库。您可以在这里找到它:http://modernizr.com/

有几个指南可以帮助您入门。但基本上,一旦下载了文件,您就可以将该测试添加到 if 的底部。然后,当加载脚本时,它将向 <html> 添加一个 css 类。您的文档,例如<html class="keyframes"><html class="no-keyframes"> .

那么,下一步是如何使用这个?好吧,你可以链接你的选择器,例如,你可以使用这个 jQuery 选择器:

$("html.keyframes className").on(....)

这意味着此事件只会在 className 上触发当它是 html.keyframes 的后代时.

以类似的方式,如果您只想在关键帧不可用时调用某些内容,您可以这样做:

$("html.no-keyframes className").on(....)

<小时/>

或者你可以使用类似的东西:

if($('html').hasClass('keyframes')) 
{
//do something only if keyframes is supported
}
else
{
//do something different if its not
}

我希望这会有所帮助。

更新

这是一个工作 fiddle ,向您展示如何使用它: http://jsfiddle.net/wf_4/hYNy8/

我已将 CDN 的 URL 包含在“外部资源”中,并且添加了关键帧的测试。然后我使用 jquery 读取 class来自 html 的值标记并将它们插入到页面中,以便您可以看到它们。我要补充的是,通过使用完整库,您将在每个页面加载时执行所有这些测试。我所做的就是为我需要的测试创建库的自定义构建。

关于javascript - 如何使用 Modernizr 测试是否支持关键帧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22631308/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com