<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> <!-- //Discovery--> <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>
The mobile webapp example project developed with html5+css3+iscroll+zepto and other technologies simulates the pull-up, pull-down loading and refreshing of the native app. The transition transition effect and transform animation effect of CSS3 are also used.
File import:
<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>
Screenshot of the effect:
