当前位置： 移动技术网 > IT编程>网页制作>CSS > 手写的wow.js解析

手写的wow.js解析

2018年11月01日  | 移动技术网IT编程  | 我要评论

手写的 wow.js

用法： 给相应的dom添加 ： class与data-class 设置 css 应用js

class与data-class

css

.a-fadein{

animation: fadein 1s both;

}

@keyframes fadein{

0%{opacity:0};

100%{opacity:1};

}

.wow{

visibility: hidden;

}

js

(function(){

let w = document.getelementsbyclassname('wow');

let l = w.length;

// 存储 wow的数据height与class

let hc = [];

for(let i = 0;i 0){

w[i].classname = w[i].classname.replace('a-fadein',' ');

console.log(w[i].classname);

w[i].style.visibility = 'hidden';

}

}else{

if(w[i].classname.indexof(hc[i].c) < 0){

w[i].classname += " " + hc[i].c;

w[i].style.visibility = 'visible';

}

}

}

}

window.onscroll = wow;

window.onload = wow;

})();

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网