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. 函数模板的载体-HPP

    在C++中,我们通常将声明放在.h头文件中,将具体的实现代码放在.cpp文件中.但是函数模板通常不这么做,函数模板是将其声明和实现都放在.hpp文件中.hpp是Header Plus Plus的缩写, ...

  2. NODE.JS安装配置

  3. Qt widgets deeps--烧鸡

    1,Qt类读取目录 QDir读取目录内容--将读取结果输出到一个QMultiLineEdit对象 QMultiLineEdit *medit; medit = new QMultiLineEdit(t ...

  4. Windows.Server.2003.R2 简体中文企业版 x86 x64（转）

    两张盘,第二张是 R2安装盘. Windows.Server.2003.R2.With.Sp2 中文企业版[MSDN官方版本][32bit] Windows 2003.R2.With.Sp2 简体中文 ...

  5. android笔记1——开发环境的搭建

    Long Long ago...已经成为了历史,我还是要说出一个真相:早年前,那时候,android还不被大众所认知的时候,当然开发人员也没不像如今那样趋于饱和状态.一位大牛前辈,也是我的学长,那时候 ...

  6. 【网络协议】TCP的拥塞控制机制

    前言 计算机网络中的带宽.交换节点中的缓存和处理机等,都是网络的资源,在某段时间内,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就要变坏,这样的情况就叫做拥塞. 所谓拥塞控制,就 ...

  7. Js模板引擎mustache

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  8. ZCTF-final-restaurant1

    和线上赛的题目差别不大,但是需要自己去泄露堆的地址.除了线上赛的溢出之外,还多了一个Use After Free的洞.我写了两种利用方法. 线上赛writeup见:http://www.cnblogs ...

  9. HTTP概念进阶

    1.什么是回调? 在Java中,就是类A调用类B中的某个方法b,然后类B又在某个时候反过来调用类A中的某个方法a,对于A来说,这个a方法便叫做回调方法 pubilc interface CallBac ...

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

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