jquery-抽屉插件

唐伯虎

<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>