基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

  <div id="wrapper">
        <ul>
            <li>row 10</li>
            <li>row 9</li>
            <li>row 8</li>
            <li>row 7</li>
            <li>row 6</li>
            <li>row 5</li>
            <li>row 4</li>
            <li>row 3</li>
            <li>row 2</li>
            <li>row 1</li>
        </ul>
    </div>
    <script>
        for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
            document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
        }
        refresher.init({
            id: "wrapper",//<------------------------------------------------------------------------------------┐
            pullDownAction: Refresh,
            pullUpAction: Load
        });
        var generatedCount = 0;
        function Refresh() {
            setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector("#wrapper ul");
                el.innerHTML = '';
                for (i = 0; i < 11; i++) {
                    li = document.createElement('li');
                    li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
                    el.insertBefore(li, el.childNodes[0]);
                }
                wrapper.refresh();/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
                for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
                    document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
                }
            }, 1000);

        }

        function Load() {
            setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.querySelector("#wrapper ul");
                for (i = 0; i < 2; i++) {
                    li = document.createElement('li');
                    li.appendChild(document.createTextNode('async row ' + (++generatedCount)));
                    el.appendChild(li, el.childNodes[0]);
                }
                wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
                for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {
                    document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
                }
            }, 1000);
        }
    </script>

via：http://www.w2bc.com/article/55236

在线预览    源码下载