这是问斩的标题

墨初学习笔记1854

很多的网站,尤其是一些手机官网或某种产品的官网,都会把自己网站的页面中一些元素作得美观起来。比如一些产吕,在打开网页或网页下拉到产品图片的时候,图片就像活了一样动起来,很是有趣。

今天介绍一款,让网页元素活跃起来的JS插件,WOW.js

此插件必须依赖Animated.css使用

使用方法

引入WOW.js和animate.css

可以从文章最下方提供的GetHub上下载wow.js也可以使用七牛提供的CDN静态资源库或其他的CDN静态资源库引用wow.js和animate.css文件


标记元素

[xcus]

1、在你所要使用样式的元素的CLASS属性中加入 wow 以及动画名称

2、还可以加可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性

[/xcus]


javascript代码

var wow = new WOW({    boxClass: 'wow',    animateClass: 'animated',    offset: 0,    mobile: true,    live: true});wow.init();

wow.js的方法属性

关于javascript代码属性讲解

wow.js

点击放大

animated.css动画参数

CLASS类名动画效果,具体的效果可以查看animated.css演示效果,演示地址在最下方

animate.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/

相关文章

javascript在指定的元素前或后插入新元素

javascript在指定的元素前或后插入新元素

在前几篇的博文中,我们说了利用appendChild方法可以在DOM文档流中指定的元素后追加利用createElement方法和createTextNode方法创建的新元素,但是appendChild...

500 501 502 503 504 505 详解

500 501 502 503 504 505 详解

服务器会经常的出现错误,那么在平时的时候出现了服务器错误,我们要如何去解决了,今天小编就简单的说说服务器500错误、501错误、502错误、503错误、504错误、505错误的一些问题所在。服务器50...

javascript中的addEventListener()方法

javascript中的addEventListener()方法

我们操作HTML DOM对象的时候,可以利addEventListener()方法为某个被选中的DOM对象添加一个事件,用来操作这个被选中的对象。下面就记录一下,如果利javascript的addEv...

jQuery获取当前页面的URL信息

在网站时不少客户要求导航条具有高亮功能,如果换到以前肯定是一个页面一个页面的去写代码,那样的话太麻烦,而且还不利于后期的维护和修改。不过现在有了jQuery了可以省去好多的事,再麻烦的事不就是一行JQ...

2017、喜迎2018,愿大家生活,工作双丰收!

2017、喜迎2018,愿大家生活,工作双丰收!

从博客的开通到今天,屈指算来差不多已经五百多个日夜了,而博客才八十多篇文章,平均下来一个星期才发一篇,而文章的主题大多都是技术型或平时记录的东西。通过这一点才充份的证明自己是一个多么懒的人。现在时间是...

这个函数返回的是包含当前函数所有参数的一个数组

这个函数返回的是包含当前函数所有参数的一个数组

在PHP中,系统内置好了很多的函数,在我们写PHP程序的过程中可以调用这些函数,可以极大的减少我们开发程序的时间与精力。当然我们也可以自己写函数,PHP在我们的自定义函数中也有系统内置好的系统函数.....

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。