1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>html5+css3实现上拉和下拉刷新</title>
  9.  
  10. <script type="text/javascript" src="http://statics.webkfa.com/js/iscroll.js"></script>
  11.  
  12. <script type="text/javascript">
  13.  
  14. var myScroll,
  15.     pullDownEl, pullDownOffset,
  16.     pullUpEl, pullUpOffset,
  17.     generatedCount = 0;
  18.  
  19. function pullDownAction () {
  20.     setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
  21.         var el, li, i;
  22.         el = document.getElementById('thelist');
  23.  
  24.         for (i=0; i<3; i++) {
  25.             li = document.createElement('li');
  26.             li.innerText = 'Generated row ' + (++generatedCount);
  27.             el.insertBefore(li, el.childNodes[0]);
  28.         }
  29.  
  30.         myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
  31.     }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
  32. }
  33.  
  34. function pullUpAction () {
  35.     setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
  36.         var el, li, i;
  37.         el = document.getElementById('thelist');
  38.  
  39.         for (i=0; i<3; i++) {
  40.             li = document.createElement('li');
  41.             li.innerText = 'Generated row ' + (++generatedCount);
  42.             el.appendChild(li, el.childNodes[0]);
  43.         }
  44.  
  45.         myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
  46.     }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
  47. }
  48.  
  49. function loaded() {
  50.     pullDownEl = document.getElementById('pullDown');
  51.     pullDownOffset = pullDownEl.offsetHeight;
  52.     pullUpEl = document.getElementById('pullUp');
  53.     pullUpOffset = pullUpEl.offsetHeight;
  54.  
  55.     myScroll = new iScroll('wrapper', {
  56.         useTransition: true,
  57.         topOffset: pullDownOffset,
  58.         onRefresh: function () {
  59.             if (pullDownEl.className.match('loading')) {
  60.                 pullDownEl.className = '';
  61.                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
  62.             } else if (pullUpEl.className.match('loading')) {
  63.                 pullUpEl.className = '';
  64.                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
  65.             }
  66.         },
  67.         onScrollMove: function () {
  68.             if (this.y > 5 && !pullDownEl.className.match('flip')) {
  69.                 pullDownEl.className = 'flip';
  70.                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
  71.                 this.minScrollY = 0;
  72.             } else if (this.y < 5 && pullDownEl.className.match('flip')) {
  73.                 pullDownEl.className = '';
  74.                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
  75.                 this.minScrollY = -pullDownOffset;
  76.             } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
  77.                 pullUpEl.className = 'flip';
  78.                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
  79.                 this.maxScrollY = this.maxScrollY;
  80.             } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
  81.                 pullUpEl.className = '';
  82.                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
  83.                 this.maxScrollY = pullUpOffset;
  84.             }
  85.         },
  86.         onScrollEnd: function () {
  87.             if (pullDownEl.className.match('flip')) {
  88.                 pullDownEl.className = 'loading';
  89.                 pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
  90.                 pullDownAction();    // Execute custom function (ajax call?)
  91.             } else if (pullUpEl.className.match('flip')) {
  92.                 pullUpEl.className = 'loading';
  93.                 pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
  94.                 pullUpAction();    // Execute custom function (ajax call?)
  95.             }
  96.         }
  97.     });
  98.  
  99.     setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  100. }
  101.  
  102. document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  103.  
  104. document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
  105. </script>
  106.  
  107. <style type="text/css" media="all">
  108. body,ul,li {
  109.     padding:0;
  110.     margin:0;
  111.     border:0;
  112. }
  113.  
  114. body {
  115.     font-size:12px;
  116.     -webkit-user-select:none;
  117.     -webkit-text-size-adjust:none;
  118.     font-family:helvetica;
  119. }
  120.  
  121. #header {
  122.     position:absolute; z-index:2;
  123.     top:0; left:0;
  124.     width:100%;
  125.     height:45px;
  126.     line-height:45px;
  127.     background-color:#d51875;
  128.     background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
  129.     background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
  130.     background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
  131.     padding:0;
  132.     color:#eee;
  133.     font-size:20px;
  134.     text-align:center;
  135. }
  136.  
  137. #header a {
  138.     color:#f3f3f3;
  139.     text-decoration:none;
  140.     font-weight:bold;
  141.     text-shadow:0 -1px 0 rgba(0,0,0,0.5);
  142. }
  143.  
  144. #footer {
  145.     position:absolute; z-index:2;
  146.     bottom:0; left:0;
  147.     width:100%;
  148.     height:48px;
  149.     background-color:#222;
  150.     background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
  151.     background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
  152.     background-image:-o-linear-gradient(top, #999, #666 2%, #222);
  153.     padding:0;
  154.     border-top:1px solid #444;
  155. }
  156.  
  157. #wrapper {
  158.     position:absolute; z-index:1;
  159.     top:45px; bottom:48px; left:-9999px;
  160.     width:100%;
  161.     background:#aaa;
  162.     overflow:auto;
  163. }
  164.  
  165. #scroller {
  166.     position:absolute; z-index:1;
  167. /*    -webkit-touch-callout:none;*/
  168.     -webkit-tap-highlight-color:rgba(0,0,0,0);
  169.     width:100%;
  170.     padding:0;
  171. }
  172.  
  173. #scroller ul {
  174.     list-style:none;
  175.     padding:0;
  176.     margin:0;
  177.     width:100%;
  178.     text-align:left;
  179. }
  180.  
  181. #scroller li {
  182.     padding:0 10px;
  183.     height:40px;
  184.     line-height:40px;
  185.     border-bottom:1px solid #ccc;
  186.     border-top:1px solid #fff;
  187.     background-color:#fafafa;
  188.     font-size:14px;
  189. }
  190.  
  191. #myFrame {
  192.     position:absolute;
  193.     top:0; left:0;
  194. }
  195.  
  196. /**
  197.  *
  198.  * Pull down styles
  199.  *
  200.  */
  201. #pullDown, #pullUp {
  202.     background:#fff;
  203.     height:40px;
  204.     line-height:40px;
  205.     padding:5px 10px;
  206.     border-bottom:1px solid #ccc;
  207.     font-weight:bold;
  208.     font-size:14px;
  209.     color:#888;
  210. }
  211. #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
  212.     display:block; float:left;
  213.     width:40px; height:40px;
  214.     background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat;
  215.     -webkit-background-size:40px 80px; background-size:40px 80px;
  216.     -webkit-transition-property:-webkit-transform;
  217.     -webkit-transition-duration:250ms;
  218. }
  219. #pullDown .pullDownIcon {
  220.     -webkit-transform:rotate(0deg) translateZ(0);
  221. }
  222. #pullUp .pullUpIcon  {
  223.     -webkit-transform:rotate(-180deg) translateZ(0);
  224. }
  225.  
  226. #pullDown.flip .pullDownIcon {
  227.     -webkit-transform:rotate(-180deg) translateZ(0);
  228. }
  229.  
  230. #pullUp.flip .pullUpIcon {
  231.     -webkit-transform:rotate(0deg) translateZ(0);
  232. }
  233.  
  234. #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
  235.     background-position:0 100%;
  236.     -webkit-transform:rotate(0deg) translateZ(0);
  237.     -webkit-transition-duration:0ms;
  238.  
  239.     -webkit-animation-name:loading;
  240.     -webkit-animation-duration:2s;
  241.     -webkit-animation-iteration-count:infinite;
  242.     -webkit-animation-timing-function:linear;
  243. }
  244.  
  245. @-webkit-keyframes loading {
  246.     from { -webkit-transform:rotate(0deg) translateZ(0); }
  247.     to { -webkit-transform:rotate(360deg) translateZ(0); }
  248. }
  249.  
  250. </style>
  251. </head>
  252. <body>
  253.  
  254. <div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
  255. <div id="wrapper">
  256.     <div id="scroller">
  257.         <div id="pullDown">
  258.             <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
  259.         </div>
  260.  
  261.         <ul id="thelist">
  262.             <li>Pretty row 1</li>
  263.             <li>Pretty row 2</li>
  264.             <li>Pretty row 3</li>
  265.             <li>Pretty row 4</li>
  266.             <li>Pretty row 5</li>
  267.             <li>Pretty row 6</li>
  268.             <li>Pretty row 7</li>
  269.             <li>Pretty row 8</li>
  270.             <li>Pretty row 9</li>
  271.             <li>Pretty row 10</li>
  272.             <li>Pretty row 11</li>
  273.             <li>Pretty row 12</li>
  274.             <li>Pretty row 13</li>
  275.             <li>Pretty row 14</li>
  276.             <li>Pretty row 15</li>
  277.             <li>Pretty row 16</li>
  278.             <li>Pretty row 17</li>
  279.             <li>Pretty row 18</li>
  280.             <li>Pretty row 19</li>
  281.             <li>Pretty row 20</li>
  282.             <li>Pretty row 21</li>
  283.             <li>Pretty row 22</li>
  284.             <li>Pretty row 23</li>
  285.             <li>Pretty row 24</li>
  286.             <li>Pretty row 25</li>
  287.             <li>Pretty row 26</li>
  288.             <li>Pretty row 27</li>
  289.             <li>Pretty row 28</li>
  290.             <li>Pretty row 29</li>
  291.             <li>Pretty row 30</li>
  292.             <li>Pretty row 31</li>
  293.             <li>Pretty row 32</li>
  294.             <li>Pretty row 33</li>
  295.             <li>Pretty row 34</li>
  296.             <li>Pretty row 35</li>
  297.             <li>Pretty row 36</li>
  298.             <li>Pretty row 37</li>
  299.             <li>Pretty row 38</li>
  300.             <li>Pretty row 39</li>
  301.             <li>Pretty row 40</li>
  302.         </ul>
  303.         <div id="pullUp">
  304.             <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
  305.         </div>
  306.     </div>
  307. </div>
  308. <div id="footer"></div>
  309.  
  310. </body>
  311. </html>

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

  1. jquery_mobile.js+html5+css3打造手机平板等各种效果

    http://www.w3school.com.cn/jquerymobile/jquerymobile_events_orientation.asp

  2. 精心挑选的HTML5/CSS3应用及源码

    这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的j ...

  3. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  6. html5+css3实现上拉和下拉刷新

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

  7. 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  8. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

  9. Html5+css3+angularjs+jquery+webAPi 开发手机web（一）

    前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

随机推荐

  1. 利用PPPOE认证获取路由器中宽带账号密码

    前言 回家时买了一台极路由准备换掉家里老掉牙的阿里路由器,想进后台看一下宽带账号密码,咦???后台密码是什么来着??? 我陷入了沉思,家里的路由器一般都是pppoe拨号,而路由器在与pppoe认证服务 ...

  2. rabbitmq集群节点操作

    节点恢复过程中把数据删掉很重要,恢复一单结点,再清数据 节点增加: 1. rabbitmq-server -detached   --- .erlang.cooike的权限,400 属主rabbitm ...

  3. PHP Warning: 的解决方法

    在后台管理,用header("location:");做返回时,总是不能正常返回, Warning: Cannot modify header information - head ...

  4. 如何看一个VC工程具体是什么工程？

    VC6等可以创建MFC, Win32等工程,拿到一个工程,怎么判断是什么工程呢? VC6全文检索看看有没有theApp 如果有一般就是MFC的 (VS?)看看工程设置,入口点函数写的是什么,/subs ...

  5. Centos 7 搭建OpenStack 私有云——（1）基础环境配置

    1.简介: OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目. OpenStack是一个开源的云计算管理 ...

  6. 黑马程序猿——JAVA高新技术——反射

    ----------android培训.java培训.java学习型技术博客.期待与您交流!------------ 一.对于反射的概念 对于JAVA反射机制是在执行状态中,对于随意一个类.都可以知道 ...

  7. [转]php-fpm配置具体解释

    [转]php-fpm配置具体解释 php-fpm具体解释 原文链接:http://php-fpm.anight.org/wiki:http://www.php-fpm.com/翻译:http://sy ...

  8. 小结:VB.NET机房收费系统个人版

    经过几天的缝缝补补,自己的个人版最终OK了,!或许是由于有第一次的机房收费系统的经验,这次做,感觉很亲切. 在业务逻辑方面,沿袭曾经的逻辑.做了一点升级.可是修改不大. 在数据库方面,感觉自己从一个小 ...

  9. 使用Cocos studio创建一个简单的project

    前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...

  10. 【BIEE】[nQSError: 35008]尝试从服务器检出对象时出错。请验证服务器设置。

    今天在使用PRD时,我先导入表A,然后觉得表A的名字不好,就把导入的表A重命名为表A_TMP,接着保存资料库就卡住了"未响应"(一般不会出现这种问题) 接着我直接使用任务管理器强制 ...