wow&&animate 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css"/>
	<body>
		<p class="wow  bounce">多喝水电视剧</p>
	</body>
	<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		　wow = new WOW({
			animateClass:'animated'
		 });
		 
//		 data-wow-duration（动画持续时间）、
//		 data-wow-delay（动画延迟时间）、
//		 data-wow-offset（元素的位置露出后距离底部多少像素执行）
//		 和data-wow-iteration（动画执行次数）这四个属性可选可不选
             wow.init();
    </script>
</html>

说明：在https://daneden.github.io/animate.css/选择效果，直接加上wow和对应效果名称


深入应用可以将特效加入脚本中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css"/>
	<body>
		<p class="wow  bounce">多喝水电视剧</p>
		<div class="dd">
			<h3>反倒是官方的若干头发的方</h3>
			<h3>突然一天半TV日本与太容易GV</h3>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		　wow = new WOW({
			animateClass:'animated'
		 });
		 
//		 data-wow-duration（动画持续时间）、
//		 data-wow-delay（动画延迟时间）、
//		 data-wow-offset（元素的位置露出后距离底部多少像素执行）
//		 和data-wow-iteration（动画执行次数）这四个属性可选可不选
             wow.init();
             
             var dd=document.querySelector('.dd')
             dd.setAttribute('class','wow bounceInUp');
             dd.setAttribute('data-wow-delay','0.3s');
             dd.setAttribute('data-wow-duration','5s');
            
             dd.children[0].setAttribute('class','wow fadeInRightBig');
             dd.children[0].setAttribute('data-wow-delay','2s');
             
             dd.children[1].setAttribute('class','wow fadeInLeftBig');
             dd.children[1].setAttribute('data-wow-delay','2s');
             
    </script>
</html>

JS获取子节点、父节点和兄弟节点的若干种方式https://blog.csdn.net/laok_/article/details/75760572


posted @ 2018-05-02 15:35  smartwange  阅读(29)  评论(0)    收藏  举报