jquery mobile 的手指上下滑动文章、导航栏

导航栏的js设置

    <!--导航栏的滚动 -->
    <script type="text/javascript">

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

        /**
         * 滚动翻页 （自定义实现此方法）
         * myScroll.refresh();        // 数据加载完成后，调用界面更新方法
         */
        function pullUpAction () {
            setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
                var el, li, i;
                el = document.getElementById('thelist');

                myScroll.refresh();        // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
            }, 1000);    // <-- Simulate network congestion, remove setTimeout from production!
        }

        /**
         * 初始化iScroll控件
         */
        function loaded() {
            pullDownEl = document.getElementById('pullDown');
            pullDownOffset = pullDownEl.offsetHeight;
            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;

            myScroll = new iScroll('wrapper', {
                scrollbarClass: 'myScrollbar', /* 重要样式 */
                useTransition: false, /* 此属性不知用意，本人从true改为false */
                topOffset: pullDownOffset,
                onRefresh: function () {
                },
                onScrollMove: function () {
                    if (this.y > 5 && !pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'flip';
                        this.minScrollY = 0;
                    } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                        pullDownEl.className = '';
                        this.minScrollY = -pullDownOffset;
                    } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'flip';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        this.maxScrollY = pullUpOffset;
                    }
                },
                onScrollEnd: function () {
                     if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpAction();
                    }
                }
            });

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

        //初始化绑定iScroll控件
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);

    </script>

导航栏具体实现代码

<div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
            </div>
            <ul id="thelist">
                <li id="tag1"><a href="#home" class="contentLink" onclick="switchTag('tag1','content1');this.blur();"><span class="selectspan1">1 </span></a></li>
                <li  id="tag2"><a href="#home"  onclick="switchTag('tag2','content2');this.blur();"><span>2</span></a></li>
                <li id="tag3"><a href="#home"  onclick="switchTag('tag3','content3');this.blur();"><span>3</span> </a></li>
                <li><a href="#home" >4 </a></li>
                <li><a href="#home" class="contentLink">5 </a></li>
                <li><a href="#home" class="contentLink">6 </a></li>
                <li><a href="#home" class="contentLink">7 </a></li>
                <li><a href="#home" class="contentLink">8 </a></li>
                <li><a href="#home" class="contentLink">9 </a></li>
                <li><a href="#home" class="contentLink">10 </a></li>
                <li><a href="#home" class="contentLink">11 </a></li>
                <li><a href="#home" class="contentLink">12 </a></li>
                <li><a href="#home" class="contentLink">13 </a></li>
                <li><a href="#home" class="contentLink">14 </a></li>
                <li><a href="#home" class="contentLink">15 </a></li>
                <li><a href="#home" class="contentLink">16 </a></li>
                <li><a href="#home" class="contentLink">17 </a></li>
            </ul>
            <div id="pullUp">
            </div>
        </div>
    </div>

导航栏的css

<style type="text/css" media="all">
        #wrapper {
            position:absolute; z-index:1;
            left:0;
            width:10%;
            background:#555;
            overflow:auto;
            height: 490px;
        }

        #scroller {
            position:relative;
            /*    -webkit-touch-callout:none;*/
            -webkit-tap-highlight-color:rgba(0,0,0,0);

            float:left;
            width:100%;
            padding:0;
            height:auto;
        }

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

        #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;
            width: 100%;
            height:auto;
        }

        #scroller li > a {
            display:block;
        }

        /**
         *
         * 下拉样式 Pull down styles
         *
         */

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

    </style>

文章页面的实现

<div id="content1" >
            <div id="outer">
                <div id="inner">
            <p>
                游戏规则：
                牌数合计144张
                （1）包括万、饼、条、1-9各4张，共108张。
                （2）字牌：东、南、西、北、中、白、发各4张，共28张
                （3）花牌：春、夏、秋、冬、梅、兰、竹、菊各1张，共8张
                四人一桌，玩家按照逆时针方向出牌，取牌是按开牌处顺时针方向取的，取牌每人一次取2墩即4张，每个玩家拿16张牌，都拿完后庄家牌头抓一张，开始按顺序补花。
                注意事项：
                1.定庄:系统随机选定一玩家做庄.连续游戏(一圈或几圈):庄家胡牌或臭庄(即流局),下一局可以连庄, 否则由庄家的下家做庄。
                2.补花：抓牌结束后凡是摸到“梅、兰、竹、菊、春、夏、秋、冬”，从庄家开始牌尾补花，如果补花过程中仍摸进花牌，须等本轮四家都补过花牌后再行补牌，再次补花的顺序仍以庄为首。在游戏过程中若是摸花牌，也从排尾补花。补花是从开牌处（牌尾）按逆时针方向补的。
                3.开“金”（财神）：
                金牌：相当于混牌，百搭，其功能是可以替代除花牌之外的任何牌。白板可以替代这张金牌原来的功能。例如金牌是5万，则5万是金，同时白板可以当5万用。如有人打出白板，玩家可以当成5万吃，碰，及胡牌。如果金牌正好是白板，则白板本身就没有牌可代，当白板为金时，漳州人称为正金。
                金牌如何产生：翻金，补花结束后庄家扔出两个骰子，根据点数从补花的跳牌处最后一张牌数，最后落在哪张上翻开即为金。如果翻金牌时翻起的牌为花牌，则放回，庄家重新扔骰子。重新开金。
                金牌在游戏规则中是可以打出的，如果有人打出了金牌，别的玩家都不能胡该金牌（即没有胡金牌点炮的），也不能吃，碰该金牌。
                4.分饼：开局后 庄家打出首张牌，若其他三家打出的第一张牌和庄一样，称为分饼，此时庄要给其他三家分红包 每家一底分。如果庄家打出第二张牌又被“分饼”则庄家要在第一次支付的基础上翻倍支付，以次类推。
                5.臭庄（和局）：一般情况下最后留10墩牌，当有人有一花分（即四个花）或杠分则多留一墩。
                最后可摸的4张牌（除去要剩的牌），若抓牌可胡的由系统自动胡牌。最后一手牌若有一家让其他三家任何一家胡牌，这局就让这一家承包所有要支付给赢家的分（所有的分包括当局的杠分和分饼等其他所有要支付的分）。若四家均未胡牌，即为和局。 在进入最后4张牌时，可以吃碰杠牌；
            </p>
        </div>
            </div>
            </div>

文章页面的js

<script type="text/javascript">
    var startX,//触摸时的坐标
            startY,
            x, //滑动的距离
            y,
            aboveY=0; //设一个全局变量记录上一次内部块滑动的位置

    var inner=document.getElementById("inner");

    function touchSatrt(e){//触摸
        e.preventDefault();
        var touch=e.touches[0];
        startY = touch.pageY;   //刚触摸时的坐标
    }

    function touchMove(e){//滑动
        e.preventDefault();
        var  touch = e.touches[0];
        y = touch.pageY - startY;//滑动的距离
        //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式
        inner.style.top=aboveY+y+"px"; //这一句中的aboveY是inner上次滑动后的位置
    }

    function touchEnd(e){//手指离开屏幕
        e.preventDefault();
        aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;

    }//
    document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
    document.getElementById("outer").addEventListener('touchmove', touchMove,false);
    document.getElementById("outer").addEventListener('touchend', touchEnd,false);
</script>

文章页面的css

#outer{ width:90%; height: 490px;  margin: auto;  overflow: hidden;float:left;}
#inner{width:90%; height: 2000px; background: darkgrey; margin: auto; position:relative; top:0; float:left; }

用到的js