jquery-drawer plugin

<meta name="viewport" content="width=device-width, initial-scale=1.0,
    minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- 抽屉-start -->
<div id="drawer" style="display: none;">
    <div class="close">X</div>
    <div class="self-drawer-content">
        <h1>需要填写的内容</h1>
    </div>
</div>

<!-- 抽屉-end -->



<button id="open">打开抽屉</button>

<!-- 引入jquery -->
<script src="jquery.js"></script>

<script>

//扩展jquery功能 
(function ($) {
    $("body").append('<div class="drawerMask" style="position:fixed;width:100%;height:100%;background: black;left:0px;top:0px;z-index: 888;display:none;opacity: 0.5;"></div>')
            $.fn.extend({
                // 初始化
                "drawerInit": function () {
                    var _this=this;
                    var width=window.innerWidth;
                    var height=window.innerHeight;
                    _this.css('width',width+"px")
                    .css('height',height+"px")
                    // .css('background',"rgba(0,0,0,.5)")
                    .css('position',"fixed")
                    .css('top',"0px")
                    .css('z-index',999)
                    .css('right',-width+"px");
                    var startX=0
                    var distance=0
                    _this.bind("touchstart",function(e){
                        var touch=e.originalEvent.touches[0];
                        startX=touch.clientX;
                    })
                    _this.bind("touchmove",function(e){
                        var touch=e.originalEvent.touches[0];
                        var moveX=touch.clientX;
                        distance=moveX-startX;
                        if(distance<0){
                            distance=0;
                        }
                        _this.css('right',-distance+"px");
                    })
                    _this.bind("touchend",function(e){
                        var width=window.innerWidth;
                        if(distance>=width/3){
                            _this.animate({right:-width+"px"},300,function(){$(".drawerMask").hide()});
                        }
                        if(distance<width/3){
                            _this.animate({right:"0px"},300);
                        }
                        distance=0;
                    })
                    var content=_this.find(".self-drawer-content");
                    content.css('width',(width*0.8)+"px")
                    .css('height',height+"px")
                    .css('background',"white")
                    .css('position',"absolute")
                    .css('top',"0px")
                    .css('right',"0px")
                    var close=_this.find(".close");
                    close.css('width',"20px")
                    .css('height',"20px")
                    .css('font-size',"15px")
                    .css('display',"flex")
                    .css('justify-content',"center")
                    .css('align-items',"center")
                    .css('background',"white")
                    .css('position',"absolute")
                    .css('top',"0px")
                    .css('right',"0px")
                    .css('z-index',999)
                    .css('border',"1px solid black")
                    .css('border-radius',"100%")
                    close.click(function(){
                        _this.animate({right:-width+"px"},500,function(){$(".drawerMask").hide()});
                       
                    })
                },
                // 展示抽屉
                "drawerShow": function () {
                    var _this=this;
                    $(".drawerMask").show()
                    _this.show();
                    _this.animate({right:"0px"},500);
                },
                // 关闭抽屉
                "drawerHide": function () {
                    var _this=this;
                    var width=window.innerWidth;
                    _this.animate({right:-width+"px"},500,function(){$(".drawerMask").hide()});
                },

            });
        })(jQuery);
        /**------------------- 以上代码可放入单独的js文件中--------------------**/


        window.onload=function(){
                // 初始化
                $("#drawer").drawerInit();
                // 点击按钮展示抽屉
                $("#open").click(function(){
                    $("#drawer").drawerShow();
                })
        }
</script>