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>

jQuery模拟原生态App上拉刷新下拉加载的更多相关文章

  1. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  2. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  3. Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  4. Flutter学习笔记（25）--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  5. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  6. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 （制作csdn app 四）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

  7. XRecyclerView上拉刷新下拉加载

    效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...

  8. iOS：延迟加载和上拉刷新/下拉加载的实现

    lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...

  9. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

随机推荐

  1. VC++6.0下通过opencv读入图像并反色

    第一个opencv测试程序: 不多说,直接上代码,代码注释很详尽: ////////////////////////////////////////////////////////////////// ...

  2. vc6.0 使用Ado 连接MS-SqlServer2000 连接字符串

    vc6.0 使用Ado 连接MS-SqlServer2000 连接字符串 分类: C/C++ VC 2012-04-12 20:23 836人阅读 评论(0) 收藏 举报 sql server数据库服 ...

  3. 【BZOJ 1088 扫雷Mine】模拟

    http://www.lydsy.com/JudgeOnline/problem.php?id=1088 2*N的扫雷棋盘,第二列的值a[i]记录第 i 个格子和它8连通的格子里面雷的数目. 第一列的 ...

  4. C++关联容器综合应用：TextQuery小程序

    本文介绍C++关联容器综合应用:TextQuery小程序(源自C++ Primer). 关于关联容器的概念及介绍,请参考园子里这篇博文:http://www.cnblogs.com/cy568sear ...

  5. uva 10026 Shoemaker's Problem _贪心

    题意:鞋匠现在有n个工作要做,每个工作要x天,没延迟一天需要付款y,鞋匠每天只能做一个工作,问使得鞋匠最少赔款的工作顺序. 思路:工作和工作之间排序,如果a.value*b.day>b.valu ...

  6. 济南最新公交线路一览（BRT）

    济南最新公交线路一览(BRT) 济南BRT1路 高速公交线路 黄岗路东5:30-21:30 全福立交桥西5:30-21:30 票价1元,刷卡9折,月票有效 高速公交公司 去程:黄岗路东(BRT) - ...

  7. Mansory算法分析

    相信大家对mansory排版算法印象十分深刻,它能够十分有效的实现页面紧凑排版,节省空间,并且还显得十分美观.在很多网站,包括鼎鼎有名的pinterest都使用了这个算法来实现排版.这个过程有点象瓦匠 ...

  8. Oracle临时表on commit preserver rows和on commit delete rows区别

    Oracle 临时表:在 Oracle 中创建一张表,这个表不用于其他的什么功能,主要用于自己的软件系统一些特有功能才用的,而当你用完之后表中的数据就没用了. Oracle 的临时表创建之后基本不占用 ...

  9. javascript设计模式——Observer

    定义一种一对多的从属关系,当一个目标状态改变,所有他的从属对对象都将收到通知. 1.简单的Observer模式 实现 var Observer = function(){ this.list = [] ...

  10. RDLC报表系列(六) 多图表-折线图和柱状图

    美好的一天开始了,这篇是RDLC系列的最后一篇文章,我的小项目也已经release,正在测试中. 1.新建demo3.aspx和demo3.rdlc文件 2.往rdlc文件中拖一个图标控件,在弹出的窗 ...