这是问斩的标题

墨初学习笔记1273

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

今天介绍一款,让网页元素活跃起来的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/

相关文章

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

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

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

jQuery获取当前页面的URL信息

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

javascript中的innerHTML属性有什么作用

javascript中的innerHTML属性有什么作用

innerHTML在javaScript中具有双向功能,一是可以从指定的元素对象中获取内容,二是可以把自定义内容插入到指定的元素对象中去。定义和用法innerHTML属性用于设置或返回指定标签之间的H...

PHP错误日志 display_errors与log_errors的区别

错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项。错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利。推荐关闭此选项display_errors 错误回显...

PHP读取大文件的多种方法介绍

读取大文件一直是一个头痛的问题,我们像使用php开发读取小文件可以直接使用各种函数实现,但一到大文章就会发现常用的方法是无法正常使用或时间太长太卡了,下面我们就一起来看看关于php读取大文件问题解决办...

javascript中的addEventListener()方法

javascript中的addEventListener()方法

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

发表评论    

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