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. poj3233之经典矩阵乘法

    Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 12346   Accepted:  ...

  2. #include <boost/weak_ptr.hpp>

    弱指针boost::weak_ptr的定义在boost/weak_ptr.hpp里.到目前为止介绍的各种智能指针都能在不同的场合下独立使用.相反,弱指针只有在配合共享指针一起使用时才有意义.因此弱指针 ...

  3. docker学习笔记（1）

    (1)Docker介绍 关于Docker的介绍,我就不列举出来了.到百度.谷歌搜索.非常多介绍文章.以下我给出官网的介绍:https://www.docker.com/whatisdocker/ (2 ...

  4. 【剑指offer】连续子数组的最大和

    个開始,到第3个为止).你会不会被他忽悠住? 输入: 输入有多组数据,每组測试数据包括两行. 第一行为一个整数n(0<=n<=100000),当n=0时,输入结束.接下去的一行包括n个整数 ...

  5. 【STL】算法 — partial_sort

    partial_sort接受一个middle迭代器,使序列中的middle-first个最小元素以递增顺序排序.置于[first, middle)内.以下是測试代码: #include <ios ...

  6. Codeforces Round #258 (Div. 2/B)/Codeforces451B_Sort the Array

    解题报告 http://blog.csdn.net/juncoder/article/details/38102391 对于给定的数组,取对数组中的一段进行翻转,问翻转后是否是递增有序的. 思路: 仅 ...

  7. css 的z-index研究

    z-index的值受position影响,而且还受父级元素影响.有很多种情况.下面是我看的一个特别全的网址,讲的很详细,收藏了,以后温故用. 对应的例子页面:http://www.neoease.co ...

  8. UVA 10603 Fill

    题意: 题目的意思是倒水,给出的四个数据是第一个水杯,第二个水杯,第三个水杯,和目标水量.一开始只有第三个水杯是满的,剩下的水杯是空的.倒水的时候只能把倒水出来的这个杯子倒空,或是倒水进去的杯子倒满. ...

  9. MySQL安全问题

    使用MySQL,安全问题不能不注意.以下是MySQL提示的23个注意事项:1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就需要使用SSH隧道来加密该连接的通信.2.用set pass ...

  10. PHP多线程的实现方法详解

    PHP5中可以使用新增的stream_socket_client()函数直接替换掉fsocketopen().PHP5之前的版本,你需要自己动手,用sockets扩展解决问题.PHP5的先进之处在于, ...