先说明,此处的方法是说超级简单的方法,不是指代码超级少,而是用非常简单的知识点,只要懂得怎么写 JavaScript 的行内样式就可以判断。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
大家应该还记得 JavaScript 行内样式怎么写吧?(看来我是废话了!)
在前端开发过程中,有时我们需要判断浏览器的内核前缀,对不同的浏览器做出不同的处理,因此我们可以这么做。
alert(element.style.webkitTransition); 这个是获取以 webkit 为前缀的 transition 值。但如果不是 webkit 为前缀的浏览器,则会返回 undefined。而我们可以将所有的内核前缀给枚举出来,然后获取其某个 CSS 的值,即可做出判断。代码如下:
- function getVendorPrefix() {
- // 使用body是为了避免在还需要传入元素
- var body = document.body || document.documentElement,
- style = body.style,
- vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
- i = 0;
- while (i < vendor.length) {
- // 此处进行判断是否有对应的内核前缀
- if (typeof style[vendor[i] + 'Transition'] === 'string') {
- return vendor[i];
- }
- i++;
- }
- }
然后只需要调用 getVendorPrefix() 即可知道浏览器的内核前缀,如果返回 undefined 则证明浏览器不支持 CSS3 属性,即没有内核前缀。
大家应该知道,我们在写代码的过程中,能写 CSS 就不写 JavaScritp,毕竟 CSS 的性能会比自己写 JS 的高一些,因此,我们在开发一些实际应该中,会用到 transition,比如一个简单的图片轮播,我们可以使用 CSS3 的 transition,也可以使用 jQuery 的 animate 或自己写原生,但 CSS3 的性能肯定会高一些,因此我们可以写两套代码,对于支持 CSS3 的浏览器则使用 animation,而不支持的则使用计时器或 animate。这样的话能够获取更好的用户体验。
以上是看 jquery.slides.js 的插件心得,如有更好的方法,请一定告知笔者。
来源: