jQuery模拟原生态App上拉刷新下拉加载效果代码，鼠标上拉时会显示loading字样，并且会模拟加载一条静态数据，支持触屏设备使用。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery模拟原生态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; 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 { 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; 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 slide var 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 wrapper mySwiper.setWrapperTranslate(0,0,0) mySwiper.params.onlyExternal=false; //Update active slide mySwiper.updateActiveSlide(0) //Hide loader $('.preloader').removeClass('visible'); },1000) slideNumber++; } </script> <div style=" text-align:center;clear:both; 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>