欢迎使用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里面吧

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值