H5移动端精装app、web前端项目实例分享

<div class="js-padding-ct1 js-padding-ct2" id="wrapper">
	<div id="scroller">
		<div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel"></span></div>
		
		<!-- //发现-->
		<ul class="sec_mod_found fl">
			<li><a href="##"><img src="images/placeholder/ban_img1.jpg" /><h2>邻居团</h2></a></li>
			<li><a href="##"><img src="images/placeholder/ban_img1.jpg" /><h2>最多围观的工地</h2></a></li>
			<li><a href="##"><img src="images/placeholder/ban_img1.jpg" /><h2>最赞的案例</h2></a></li>
			<li><a href="##"><img src="images/placeholder/ban_img1.jpg" /><h2>最畅销的商品</h2></a></li>
		</ul>
		
		<div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span></div>
	</div>
</div>

利用html5+css3+iscroll+zepto等技术开发的移动端webapp实例项目，模拟了原生app上拉、下拉加载刷新。还用到了css3的transition过渡效果及transform动画效果。

文件引入：

<link type="text/css" rel="stylesheet" href="css/scrollbar.css" />
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/iscroll-wrapper.js"></script>

效果截图：