如何制作网站后加载的动态（滚动浏览器滚动条才出现动态页面的）效果 

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.dowebok.com/98/css/animate.min.css">
<style>
.dowebok .area1 { background-color: #fff;}
.dowebok .area1 .list1 { position: relative; width: 1200px; height: 496px; margin: 0 auto; list-style-type: none;}
.dowebok .list1 .item0 {position:relative; width: 1200px; height:496px;}
.dowebok .list1 .item1 { left: 0; top: 0; background: url(images/1a.jpg) 0 0 no-repeat;}
.dowebok .list1 .item2 { left: 650px; top:-496px; background: url(images/1b.jpg) 0 0 no-repeat;}

.dowebok .area2 {}
.dowebok .area2 .list22 { position: relative; width: 1200px; height: 850px; margin: 0 auto; list-style-type: none;}
.dowebok .list22 .item33 { position: absolute;width: 1200px; height: 850px;}
.dowebok .list22 .item44 { left: 0; top: 0; background: url(images/2a.jpg) 0 0 no-repeat;}
.dowebok .list22 .item55 { left: 552px; top: 0px; background: url(images/2b.jpg) 0 0 no-repeat;}
.dowebok .list22 .item66 { left:552px; top:400px; background: url(images/2c.jpg) 0 0 no-repeat;}
</style>

</head>
<body>
<div class="dowebok">
	<div class="area1">
		<ul class="list1">
			<li class="item0 item1 wow bounceInLeft"></li>
			<li class="item0 item2 wow bounceInRight"></li>
		</ul>
	</div>

	<div class="area2">
		<ul class="list22">
			<li class="item33 item44 wow bounceInLeft"></li>
			<li class="item33 item55 wow bounceInRight" data-wow-delay="0.3s"></li>
			<li class="item33 item66 wow bounceInRight" data-wow-delay="0.6s"></li>
		</ul>
	</div>
</div>

<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
	new WOW().init();
};
</script>


</body>
</html>

　　

posted @ 2017-12-11 14:36  藏玉  阅读(189)  评论(0)  编辑  收藏  举报