歡迎使用CSDN-markdown編輯器

比較倉促,
先放上去吧,方面以後再來修改

(function(jQuery,document){
        if(!jQuery){
            if(console.error){
                console.error("請先引入 jQuery.js");
            }
            return;
        }
        if(!document || !document.body){
            if(console.error){
                console.error("需要body加載完成之後在能執行pull.js");
            }
            return;
        }

        var b = document.body;
        var x,y,scrollTop;
        var isTouch,isPullDown=false,isPullUp=false;

        b.addEventListener("touchstart", function(evt){
            //console.log('touchstart');
            var touch = evt.touches[0]; //獲取第一個觸點
            x = Number(touch.pageX); //頁面觸點X座標
            y = Number(touch.pageY); //頁面觸點Y座標
            scrollTop=b.scrollTop;
            isTouch=true;

            //console.log('x = ' + x);
            //console.log('y = ' + y);
        });
        b.addEventListener("touchend", function(evt){
            //console.log('touchend');
            isTouch=false;
            isPullDown=false;
            isPullUp=false;
        });
        b.addEventListener("touchmove", function(evt){
            //console.log('touchmove');

            var touch = evt.touches[0]; //獲取第一個觸點
            var mx = Number(touch.pageX); //頁面觸點X座標
            var my = Number(touch.pageY); //頁面觸點Y座標

            //console.log("isTouch = " + isTouch)
            //console.log("y-my = " + (y-my))
            //console.log("b.scrollTop = " + b.scrollTop);
            if(isTouch){
                if(my -y >30){
                    if(b.scrollTop==0){
                        if(!isPullUp){
                            console.log("pullUp");
                            isPullUp=true;
                        }
                    }
                }
                if( y-my > 100 ){
                    if(scrollTop!=0 && scrollTop == b.scrollTop){
                        if(!isPullDown){
                            //console.log('my = ' + my);
                            //console.log('y = ' + y);
                            //console.log('scrollTop = ' + scrollTop);
                            //console.log('b.scrollTop = ' + b.scrollTop);
                            console.log("pullDown");
                            isPullDown=true;
                        }
                    }
                }

            }

        });
})(jQuery,document)     

-=—————————————————-
修改了一下

(function($){
        if(!$){
            if(console.error){
                console.error("請先引入 jQuery.js");
            }
            return;
        }

        var Pull= function(b,setting){
            if(!b){
                if(console.error){
                    console.error("需要body加載完成之後在能執行pull.js");
                }
                return;
            }
            b = b[0];
            var settings=$.extend({},Pull.defaults,setting);

            var x,y,scrollTop;
            var isTouch,isPullDown=false,isPullUp=false;

            b.addEventListener("touchstart", function(evt){
                //console.log('touchstart');
                var touch = evt.touches[0]; //獲取第一個觸點
                x = Number(touch.pageX); //頁面觸點X座標
                y = Number(touch.pageY); //頁面觸點Y座標
                scrollTop=b.scrollTop;
                isTouch=true;

                //console.log('x = ' + x);
                //console.log('y = ' + y);
            });
            b.addEventListener("touchend", function(evt){
                //console.log('touchend');
                isTouch=false;
                isPullDown=false;
                isPullUp=false;
            });
            b.addEventListener("touchmove", function(evt){
                //console.log('touchmove');

                var touch = evt.touches[0]; //獲取第一個觸點
                var mx = Number(touch.pageX); //頁面觸點X座標
                var my = Number(touch.pageY); //頁面觸點Y座標

                //console.log("isTouch = " + isTouch)
                //console.log("y-my = " + (y-my))
                //console.log("b.scrollTop = " + b.scrollTop);
                if(isTouch){
                    if(my -y >30){
                        if(b.scrollTop==0){
                            if(!isPullUp){
                                if(settings.pullUp){
                                    settings.pullUp();
                                }
                                //console.log("pullUp");
                                isPullUp=true;
                            }
                        }
                    }
                    if( y-my > 100 ){
                        if(scrollTop!=0 && scrollTop == b.scrollTop){
                            if(!isPullDown){
                                //console.log('my = ' + my);
                                //console.log('y = ' + y);
                                //console.log('scrollTop = ' + scrollTop);
                                //console.log('b.scrollTop = ' + b.scrollTop);
                                if(settings.pullDown){
                                    settings.pullDown();
                                }
                                isPullDown=true;
                            }
                        }
                    }

                }

            });
        }

        Pull.defaults={
                pullDown:function(){
                    if(console.log){
                        console.log("pullDown")
                    }
                },
                pullUp:function(){
                    if(console.log){
                        console.log("pullUp")
                    }
                }

        }

        $.fn.Pull=function(settings){
            return new Pull(this,settings);
        };
})(jQuery)      
<html>
    <head>
        <title>test</title>
        <meta name="viewport" content="width=640, user-scalable=yes,initial-scale=0.1,maximum-scale=0.1" /> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="js/jquery.min.js"></script>
        <script src="pull.js"></script>
         <script type="text/javascript">
            $(document).ready(function(){
                var setting = {
                    pullDown:function(){
                        console.log("pullDown2");
                    },
                    pullUp:function(){
                        console.log("pullUp2")
                    }
                }
                $(document.body).Pull(setting);
            });
         </script>
        <style type="text/css">
            body{
                text-align:center; margin:0 atuto; 
            }
            .container{
                overflow: auto;
            }
            .container div{
                line-height: 60px;
                font-size: 24px;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
            <div><span>test</span><span>test</span> </div>  <div><span>test</span><span>test</span> </div>
        </div>
    </body>

</html>

只在chrome裏測試了, chrome的測試方法,是打開chrome開發工具,點擊開發工具工具欄最左邊的手機模擬器圖標 ,然後滑動


吐糟一下,自從csdn把iteye收購以後,iteye的用戶活躍度是直線下降,何棄療啊
這個功能原來是發不到iteye的,其實我一直是用iteye的,就是應爲iteye很簡潔。
現在都快死了,沒辦法,搬到csdn裏面吧

發佈了83 篇原創文章 · 獲贊 6 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章