这是问斩的标题

墨初学习笔记1520

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

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

相关文章

PHP+MySQL网站打开速度的几个因素

PHP+MySQL网站打开速度的几个因素

这几天有客户订制了一款主题,当然这款主题已经在zblog的应用中心开始审核,至于结果怎么样,还请大家关注我的博客。审核通过后,我会在博客里告诉大家一声的。当然本站用的自己写的主题《墨初VIP主题》还在...

PHP中超全局变量$GLOBALS和global的区别

ar1;$var1 = 2;unset($var1);}function t2() {$GLOBALS['var1'] = 3;...

JQ获取某个元素下的所有图片并改变其属性

利用JQ获取某个元素下的所有图片并改变其属性...

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

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

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

javascript中的innerHTML属性有什么作用

javascript中的innerHTML属性有什么作用

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

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

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

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

发表评论    

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