jQuery模拟原生态App上拉刷新下拉加载
生活随笔
收集整理的這篇文章主要介紹了
jQuery模拟原生态App上拉刷新下拉加载
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery模擬原生態(tài)App上拉刷新下拉加載效果代碼，鼠標(biāo)上拉時(shí)會顯示loading字樣，并且會模擬加載一條靜態(tài)數(shù)據(jù)，支持觸屏設(shè)備使用。
?
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery模擬原生態(tài)App上拉刷新下拉加載效果 </title> <link rel="stylesheet" href="css/idangerous.swiper.css"> <meta name="viewport" content="width=device-width"> <style> html {height: 100%; } body {margin: 0;font-family: Arial, Helvetica, sans-serif;font-size: 13px;line-height: 1.5;position: relative;height: 100%;background: #333;box-shadow: 0px 0px 100px #000 inset; } .preloader {position: absolute;left: 0;top: -100px;z-index: 0;color: #fff;text-align: center;line-height: 100px;height: 100px;width: 100%;opacity: 0;font-size: 25px;-webkit-transition: 300ms;-moz-transition: 300ms;-ms-transition: 300ms;-o-transition: 300ms;transition: 300ms;background: rgba(0,0,0,0.1); } .preloader.visible {top: 0;opacity: 1; } .swiper-container {width: 100%;height: 100%;color: #fff;text-align: center;position: relative;z-index: 10; } .red-slide {background: #ca4040; } .blue-slide {background: #4390ee; } .orange-slide {background: #ff8604; } .green-slide {background: #49a430; } .pink-slide {background: #973e76; } .swiper-slide {height: 100px;width: 100%;line-height: 100px;opacity: 0.2;-webkit-transition: 300ms;-moz-transition: 300ms;-ms-transition: 300ms;-o-transition: 300ms;transition: 300ms; } .swiper-slide-visible {opacity: 1; } .swiper-slide .title {font-style: italic;font-size: 42px; } </style> </head> <body> <div class="preloader"> Loading... </div> <div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide red-slide"><div class="title">Slide 1</div></div><div class="swiper-slide blue-slide"><div class="title">Slide 2</div></div><div class="swiper-slide orange-slide"><div class="title">Slide 3</div></div><div class="swiper-slide green-slide"><div class="title">Slide 4</div></div><div class="swiper-slide pink-slide"><div class="title">Slide 5</div></div><div class="swiper-slide red-slide"><div class="title">Slide 6</div></div><div class="swiper-slide blue-slide"><div class="title">Slide 7</div></div><div class="swiper-slide orange-slide"><div class="title">Slide 8</div></div></div> </div> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/idangerous.swiper.min.js"></script> <script>var holdPosition = 0;var mySwiper = new Swiper('.swiper-container',{slidesPerView:'auto',mode:'vertical',watchActiveIndex: true,onTouchStart: function() {holdPosition = 0;},onResistanceBefore: function(s, pos){holdPosition = pos;},onTouchEnd: function(){if (holdPosition>100) {mySwiper.setWrapperTranslate(0,100,0)mySwiper.params.onlyExternal=true$('.preloader').addClass('visible');loadNewSlides();}}})var slideNumber = 0;function loadNewSlides(){setTimeout(function(){//Prepend new slidevar colors = ['red','blue','green','orange','pink'];var color = colors[Math.floor(Math.random()*colors.length)];mySwiper.prependSlide('<div class="title">jphtml.com '+slideNumber+'</div>', 'swiper-slide '+color+'-slide');//Release interactions and set wrappermySwiper.setWrapperTranslate(0,0,0)mySwiper.params.onlyExternal=false;//Update active slidemySwiper.updateActiveSlide(0)//Hide loader$('.preloader').removeClass('visible');},1000)slideNumber++;}</script><div style=" text-align:center;clear:both; width:1000px;font-size:12px;color:#666;margin:20px auto 0 auto;"> <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>來源：<a href="http://www.jphtml.com/" target="_blank">精品代碼</a></p> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5850747'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s5.cnzz.com/stat.php%3Fid%3D5850747%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script><iframe width="100%" height="305" frameborder="0" scrolling="no" src="http://app.wumii.com/ext/widget/hot?prefix=http%3A%2F%2Fwww.jphtml.com%2F&num=14&t=1"></iframe> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe961e71123b94dd8f2490c379e8c7567' type='text/javascript'%3E%3C/script%3E")); </script> </div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/axl234/p/4213297.html
總結(jié)
以上是生活随笔為你收集整理的jQuery模拟原生态App上拉刷新下拉加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 诚通网盘会员很坑的，升级会员的人要注意
- 下一篇： 插入排序（java版）