为什么wow.jswow大脚不起作用用

来源：蜘蛛抓取(WebSpider) 时间：2018-05-20 15:07 标签： vue.js watch不起作用
OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(at)ourjs.com
订阅邮件周刊
WowJS:在滚动页面时添加动画效果的简单实现
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
之前介绍过，通过Animate.css可以让不过这种动画效果却是没法控制的，通过
，可以在向下滚动的过程中逐渐释放这些动画效果。默认情况下，当你向下滚动页面时，可以逐渐展示出 CSS 动画。它一般使用 animate.css 的动画效果。但是，您可以轻松设置成您喜欢的动画库。优点比其他 JavaScript 视觉插件更轻量级，像 Scrollorama (这个太重了，其实我们的需求都是非常简单的)超简单的安装，与 animate.css 配合，只需几行代码即可。简单使用HTML当滚动到这两个secion时，其会分别从左/右滚出。&section class="wow slideInLeft"&&/section&&section class="wow slideInRight"&&/section&JavaScriptnew WOW().init();高级应用可以改变标志class，默认为 'wow'，动画速度等HTML&section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"&&/section&&section class="wow slideInRight" data-wow-offset="10"& data-wow-iteration="10"&&/section&JavaScriptvar wow = new WOW({& boxClass:&&&& 'wow',&&&&& // animated element css class (default is wow)& animateClass: 'animated', // animation css class (default is animated)& offset:&&&&&& 0,&&&&&&&&& // distance to the element when triggering the animation (default is 0)& mobile:&&&&&& true,&&&&&& // trigger animations on mobile devices (default is true)& live:&&&&&&&& true,&&&&&& // act on asynchronously loaded content (default is true)& callback:&&&& function(box) {&&& // the callback is fired every time an animation is started&&& // the argument that is passed in is the DOM node being animated& }});wow.init();项目地址: DEMO地址：
&热门文章 - 分享最多
&相关阅读 - JS学习
&关键字 - JavaScript
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊502 Bad Gateway
502 Bad GatewayJS库之wow.js使用方法
转载 &发布时间：日 15:36:59 & 投稿：mrr
近日，在做项目中，需要做到滚动条滑到某个位置时，才能显示动画，网上查询到有个wow.js可以达到要求，现在把使用方法做如下总结，需要的朋友参考下吧
近日，在做项目中，需要做到滚动条滑到某个位置时，才能显示动画，网上查询到有个wow.js可以达到要求，现在把使用方法做如下总结：
使用方法真是超简单~~
需要配合Animated.css使用
方法如下：
　　1.引用wow.js或者wow.min.js 和 animate.css
　　2.在需要用到这个效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s"，具体所表示的含义在下图中有说明
　　3.初始化wow.js
　　代码如下：
　&script&
　　wow = new WOW({
　　animateClass: ‘animated‘,
wow.init();
　　&/script&
以上所述是小编给大家介绍的S库之wow.js使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具WOW.js – 让页面滚动更有趣
有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。
WOW.js 依赖 ，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。
浏览器兼容
IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。
1、引入文件
&link rel="stylesheet" href="css/animate.min.css"&
&div class="wow slideInLeft"&&/div&
&div class="wow slideInRight"&&/div&
可以加入 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&
3、JavaScript
new WOW().init();
如果需要自定义配置，可如下使用：
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
wow.init();
‘wow’
需要执行动画的元素的 class
animateClass
‘animated’
animation.css 动画的 class
距离可视区域多少开始执行动画
是否在移动设备上执行动画
异步加载的内容是否有效
(window.slotbydup=window.slotbydup || []).push({
id: '5504890',
container: s,
size: '728,90',
display: 'inlay-fix'
& CopyRight 2016 dowebok.comfullpage与wow.js怎么兼容，滚到第二页wow.js怎么失效了？ - 知乎4被浏览560分享邀请回答21 条评论分享收藏感谢收起

我要回帖

更多关于 vue.js watch不起作用 的文章

 

随机推荐