<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>html5+css3实现上拉和下拉刷新</title>

  <style type="text/css" media="all">
    body,ul,li {
      padding:0;
      margin:0;
      border:0;
    }

    body {
      font-size:12px;
      -webkit-user-select:none;
      -webkit-text-size-adjust:none;
      font-family:helvetica;
    }

    #header {
      position:absolute; z-index:2;
      top:0; left:0;
      width:100%;
      height:45px;
      line-height:45px;
      background-color:#d51875;
      background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
      background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
      background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
      padding:0;
      color:#eee;
      font-size:20px;
      text-align:center;
    }

    #header a {
      color:#f3f3f3;
      text-decoration:none;
      font-weight:bold;
      text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    }

    #footer {
      position:absolute; z-index:2;
      bottom:0; left:0;
      width:100%;
      height:48px;
      background-color:#222;
      background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
      background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
      background-image:-o-linear-gradient(top, #999, #666 2%, #222);
      padding:0;
      border-top:1px solid #444;
    }

    #wrapper {
      position:absolute; z-index:1;
      top:45px; bottom:48px; left:-9999px;
      width:100%;
      background:#aaa;
      overflow:auto;
    }

    #scroller {
      position:absolute; z-index:1;
      /*    -webkit-touch-callout:none;*/
      -webkit-tap-highlight-color:rgba(0,0,0,0);
      width:100%;
      padding:0;
    }

    #scroller ul {
      list-style:none;
      padding:0;
      margin:0;
      width:100%;
      text-align:left;
    }

    #scroller li {
      padding:0 10px;
      height:40px;
      line-height:40px;
      border-bottom:1px solid #ccc;
      border-top:1px solid #fff;
      background-color:#fafafa;
      font-size:14px;
    }

    #myFrame {
      position:absolute;
      top:0; left:0;
    }

    /**
     *
     * Pull down styles
     *
     */
    #pullDown, #pullUp {
      background:#fff;
      height:40px;
      line-height:40px;
      padding:5px 10px;
      border-bottom:1px solid #ccc;
      font-weight:bold;
      font-size:14px;
      color:#888;
    }
    #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
      display:block; float:left;
      width:40px; height:40px;
      background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat;
      -webkit-background-size:40px 80px; background-size:40px 80px;
      -webkit-transition-property:-webkit-transform;
      -webkit-transition-duration:250ms;
    }
    #pullDown .pullDownIcon {
      -webkit-transform:rotate(0deg) translateZ(0);
    }
    #pullUp .pullUpIcon  {
      -webkit-transform:rotate(-180deg) translateZ(0);
    }

    #pullDown.flip .pullDownIcon {
      -webkit-transform:rotate(-180deg) translateZ(0);
    }

    #pullUp.flip .pullUpIcon {
      -webkit-transform:rotate(0deg) translateZ(0);
    }

    #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
      background-position:0 100%;
      -webkit-transform:rotate(0deg) translateZ(0);
      -webkit-transition-duration:0ms;

      -webkit-animation-name:loading;
      -webkit-animation-duration:2s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-timing-function:linear;
    }

    @-webkit-keyframes loading {
      from { -webkit-transform:rotate(0deg) translateZ(0); }
      to { -webkit-transform:rotate(360deg) translateZ(0); }
    }

  </style>
</head>
<body>

<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
  <div id="scroller">
    <div id="pullDown">
      <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
    </div>

    <ul id="thelist">
      <li>Pretty row 1</li>
      <li>Pretty row 2</li>
      <li>Pretty row 3</li>
      <li>Pretty row 4</li>
      <li>Pretty row 5</li>
      <li>Pretty row 6</li>
      <li>Pretty row 7</li>
      <li>Pretty row 8</li>
      <li>Pretty row 9</li>
      <li>Pretty row 10</li>
      <li>Pretty row 11</li>
      <li>Pretty row 12</li>
      <li>Pretty row 13</li>
      <li>Pretty row 14</li>
      <li>Pretty row 15</li>
      <li>Pretty row 16</li>
      <li>Pretty row 17</li>
      <li>Pretty row 18</li>
      <li>Pretty row 19</li>
      <li>Pretty row 20</li>
      <li>Pretty row 21</li>
      <li>Pretty row 22</li>
      <li>Pretty row 23</li>
      <li>Pretty row 24</li>
      <li>Pretty row 25</li>
      <li>Pretty row 26</li>
      <li>Pretty row 27</li>
      <li>Pretty row 28</li>
      <li>Pretty row 29</li>
      <li>Pretty row 30</li>
      <li>Pretty row 31</li>
      <li>Pretty row 32</li>
      <li>Pretty row 33</li>
      <li>Pretty row 34</li>
      <li>Pretty row 35</li>
      <li>Pretty row 36</li>
      <li>Pretty row 37</li>
      <li>Pretty row 38</li>
      <li>Pretty row 39</li>
      <li>Pretty row 40</li>
    </ul>
    <div id="pullUp">
      <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
    </div>
  </div>
</div>
<div id="footer"></div>
<script type="text/javascript" src="/static/js/iscroll.js"></script>

<script type="text/javascript">

  var myScroll,
          pullDownEl,
          pullDownOffset,
          pullUpEl,
          pullUpOffset,
          generatedCount = 0;

  function pullDownAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
      var el, li, i;
      el = document.getElementById('thelist');

      for (i=0; i<3; i++) {
        li = document.createElement('li');
        li.innerText = 'Generated row ' + (++generatedCount);
        el.insertBefore(li, el.childNodes[0]);
      }

      myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
  }

  function pullUpAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
      var el, li, i;
      el = document.getElementById('thelist');

      for (i=0; i<3; i++) {
        li = document.createElement('li');
        li.innerText = 'Generated row ' + (++generatedCount);
        el.appendChild(li, el.childNodes[0]);
      }

      myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
  }

  function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = pullUpEl.offsetHeight;

    myScroll = new iScroll('wrapper', {
      useTransition: true,
      topOffset: pullDownOffset,
      onRefresh: function () {
        if (pullDownEl.className.match('loading')) {
          pullDownEl.className = '';
          pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
        } else if (pullUpEl.className.match('loading')) {
          pullUpEl.className = '';
          pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
        }
      },
      onScrollMove: function () {
        if (this.y > 5 && !pullDownEl.className.match('flip')) {
          pullDownEl.className = 'flip';
          pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
          this.minScrollY = 0;
        } else if (this.y < 5 && pullDownEl.className.match('flip')) {
          pullDownEl.className = '';
          pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
          this.minScrollY = -pullDownOffset;
        } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
          pullUpEl.className = 'flip';
          pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
          this.maxScrollY = this.maxScrollY;
        } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
          pullUpEl.className = '';
          pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
          this.maxScrollY = pullUpOffset;
        }
      },
      onScrollEnd: function () {
        if (pullDownEl.className.match('flip')) {
          pullDownEl.className = 'loading';
          pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
          pullDownAction();    // Execute custom function (ajax call?)
        } else if (pullUpEl.className.match('flip')) {
          pullUpEl.className = 'loading';
          pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
          pullUpAction();    // Execute custom function (ajax call?)
        }
      }
    });

    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  }

  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

  document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
</body>
</html>

html5+css3实现上拉和下拉刷新的更多相关文章

  1. html5+css3实现手机下拉和下拉刷新

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Arduino 极速入门系列 - 光控灯（2） - 关于开关，上拉、下拉电阻那些事

    接上篇,这次继续讲解光控灯的另外两个组成部分 - 开关和光敏电阻,光控灯里面将会有自锁开关按钮和光敏电阻.这此主要给新玩电子的朋友解释一下开关按钮的做法. 开关按钮的引脚电平读取问题 - 新手专用 我 ...

  3. 使用iScroll实现上拉或者下拉刷新

    上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...

  4. 纯CSS3实现宽屏二级下拉菜单

    今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

  5. ios 上拉载入下拉刷新Dome

    为练手写了一个小的上拉载入很多其它下拉刷新的小的Dome . 没有太多的技术含量,仅仅是作为新手的启示用.是上一篇下拉载入的扩展.先看一下那个再看这个就easy非常多. Dome下载:http://d ...

  6. ListView装上拉电阻下拉刷新

    主要用到了这个几个文件.MainActivity是界面的Activity,MyAdapter是ListView的自己定义适配,MyListView是自己定义带头部LIistView,假设仅仅须要上拉载 ...

  7. #Java Web累积#关于MUI的上滑和下拉加载

    其实按照MUI的文档去写,也没什么问题: JSP中: <%@ page contentType="text/html;charset=UTF-8" language=&quo ...

  8. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  9. JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

随机推荐

  1. 17 Great Machine Learning Libraries

    17 Great Machine Learning Libraries 08 October 2013 After wonderful feedback on my previous post on ...

  2. hdoj 1150 Machine Schedule【匈牙利算法+最小顶点覆盖】

    Machine Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. PyDev+eclipse的编码问题

    1.在代码的开始声明编码为utf-8

  4. jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...

  5. RichtextBox 行和列

    获得光标所在的行号 获得光标所在的列号 设置光标到指定行号 设置光标到指定列号 http://www.huifangseo.com/blog/6/7.html 获得光标所在的行号和列号 方法1 int ...

  6. android invalidate 执行流程详解

    invalidate()函数的主要作用是请求View树进行重绘,该函数可以由应用程序调用,或者由系统函数间接 调用,例如setEnable(), setSelected(), setVisiblity ...

  7. 【转】学习Flex ActionScript 3.0 强烈推荐电子书

    学习Flex ActionScript 3.0 强烈推荐电子书 AdvancED ActionScript 3.0 Animation(<Make things  move>姐妹篇,强烈推 ...

  8. Shell变量命名规则

    变量与变量内容以一个等号『=』来连结,如下所示: 『myname=chenfei0801』 等号两边不能直接接空格符,如下所示为错误: 『myname = chenfei0801』或『myname=c ...

  9. Builder 生成器模式

    将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 当同时满足以下情况的时候可以使用Builder模式: 当创建复杂对象的算法应该独立于该对象的组成部分以及他们的装配方式. 当 ...

  10. CSS排版页面

    创建CSS文件如下: @charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; border:0px; } ...