基于HTML5手機上下滑動翻頁特效。這是一款手機移動端觸屏滑動翻頁代碼下載。效果圖如下：

在線預覽????源碼下載

實現的代碼。

html代碼：

<section class="u-alert"><img style="display:none;" src="images/loading_large.gif"><div class="alert-loading z-move"><div class="cycleWrap"> <span class="cycle cycle-1"></span><span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span></div><div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span></div></div></section><section class="u-arrow"><p class="css_sprite01"></p></section><section class="p-ct transformNode-2d" style="height: 907px;"><div class="translate-back" style="height: 907px;"><div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height:70%;"><div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/1.jpg); background-size: cover; height: 909px; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height:70%;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/2.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height:70%;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/3.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/4.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/5.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/6.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/7.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/8.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/9.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/10.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/11.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/12.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/13.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/14.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/15.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/16.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/17.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/18.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/19.jpg); background-size: cover; background-position: 50% 50%;"></div></div><div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 907px;"><div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(images/20.jpg); background-size: cover; background-position: 50% 50%;"></div></div></div></section><section class="u-pageLoading"><img src="images/load.gif" alt="loading"></section>

via：http://***/Article/40662

總結

以上是生活随笔為你收集整理的基于HTML5手机上下滑动翻页特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。