.slider{
background: #333;
width: 200px;
height: 100%;
position: fixed;
right:-200px;
display: none;
overflow-y: scroll;
color:#fff;
z-index: 1005;
padding: 0px 10px;
}
.img_title_row{
color: #fff;
padding-bottom: 10px;
}
.img_title{
display:flex;
border-radius: 50%;
}
.img_title_img{
margin:0 auto;
margin-top: 20px;
width: 80px;
height: 80px;
}
.img_title_txt{
text-align: center;
margin: 10px 0px;
line-height: 25px;
}
<div id="slider" class="slider">
<div class="img_title">
<img src="<{$member_info['avatar']}>" alt="" class="img_title_img">
</div>
<div class="img_title_txt">
<{$member_info['uname']}><br/666
</div>
<ul style="padding: 10px;font-size: 16px;text-align: center;">
<a href="#">
<li style="color:#fff;margin: 10px 0px;">
<i class="fa fa-sticky-note-o" aria-hidden="true"></i>
<span href="#" style="color:#fff;margin-left: 10px;" id="goods_records">发货记录</span>
</li>
</a>
<a href="#">
<li style="color:#fff;margin: 10px 0px;">
<i class="fa fa-cog" aria-hidden="true"></i>
<span href="#" style="color:#fff;margin-left: 10px;" id="addr_console">地址管理</span>
</li>
</a>
</ul>
</div>
$(".allrow_goods").on("touchstart", function(e) {
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
$(this).unbind("touchmove");
});
$(".allrow_goods").on("touchend", function(e) {
if (e.cancelable) {
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
if ( Math.abs(X) > Math.abs(Y) && X > 50 ) {
$(".slider").hide(300).css("right","-200");
}
else if (Math.abs(X) > Math.abs(Y) && X < 0 ) {
$(".slider").show(300).css("right","0");
} else if(Y>0 || Y<0) {
}else {
return;
}
});