很多的网站，尤其是一些手机官网或某种产品的官网，都会把自己网站的页面中一些元素作得美观起来。比如一些产吕，在打开网页或网页下拉到产品图片的时候，图片就像活了一样动起来，很是有趣。
今天介绍一款，让网页元素活跃起来的JS插件,WOW.js
此插件必须依赖Animated.css使用
使用方法
引入WOW.js和animate.css
可以从文章最下方提供的GetHub上下载wow.js也可以使用七牛提供的CDN静态资源库或其他的CDN静态资源库引用wow.js和animate.css文件
<link rel="stylesheet" type="text/css" rel="nofollow" href="animate.css"> <script src="WOW.js" type="text/javascript"></script>
标记元素
1、在你所要使用样式的元素的CLASS属性中加入 wow 以及动画名称
2、还可以加可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性
代码
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
javascript代码
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();wow.js的方法属性
关于javascript代码属性讲解
点击放大
animated.css动画参数
CLASS类名动画效果，具体的效果可以查看animated.css演示效果，演示地址在最下方
点击放大
下载&CDN
wow.js GetHub地址：https://github.com/matthieua/WOW
wow.js 七牛CDN公共库: https://cdn.staticfile.org/wow/1.1.2/wow.min.js
animate.css 七牛CDN公共库：https://cdn.staticfile.org/animate.css/3.5.2/animate.min.css
animate.css 动画演示地址：https://daneden.github.io/animate.css/
以上就是wow.javascript让你的网页元素活跃起来。生活不管苦与甜，好好享受每一天，人生不管得与失，看开了就有希望，脚下的路，不管直与弯，走下去定有惊喜。更多关于wow.javascript让你的网页元素活跃起来请关注haodaima.com其它相关文章！
