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