jQuery模拟原生态App上拉刷新下拉加载

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;
    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 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; 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>

 

posted @ 2015-01-09 14:42  axl234  阅读(901)  评论(0)  编辑  收藏  举报