2018年3月16日

wow.js虽好用,不过要注意正确使用


wow.js 是一款jquery插件,可以让网页的元素动起来,作为切图网(qietu.com)的前端开发老司机,我在这里力荐这个插件,在我们的很多前端项目中都屡次用到,不过wow.js虽好用,不过要注意正确使用方式哦

 

使用3部曲

1、引入文件

<link rel="stylesheet" href="css/animate.min.css">

2、HTML

<div></div>
<div></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div data-wow-duration="2s" data-wow-delay="5s"></div>
<div data-wow-offset="10"  data-wow-iteration="10"></div>

3、JavaScript

new WOW().init();

 

是不是使用很简单呢,其实不然,所有的文档都会告诉你这样用,但是是有致命的bug的,就是会导致ie8下内容不显示,因为wow用到了css3的动画特质,而css3从ie9开始才被支持,所以ie8显然是会有问题的,最好的方式就是在ie8以上的是才执行wow.js ,好了,正确的使用方式是这样的:

 

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
	new WOW().init();
};

切图网长期致力于web前端开发外包,专注,专业,欢迎甩单。

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》