head
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
style
.addnav{
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
z-index:10;
}
.addnav_content{
position: fixed;
right:0.17rem;
bottom: 1.53rem;
z-index:10;
width: 0.82rem;
height: 0.82rem;
}
.addnav .cont{
display: block;
width: 72px;
height: 180px;
position: fixed;
right:8px;
bottom: 77px;
background: transparent;
}
.addnav .cont .add_img1{
display: block;
width: 48px;
height: 48px;
margin: 0 auto;
background: red;
border-radius: 50%;
margin-top: -6px;
}
.addnav .cont a{
display: block;
width: 72px;
height: 24px;
line-height: 24px;
margin-bottom: 20px;
border-radius: 0.06rem;
text-align: center;
font-size: 0.24rem;
color: #313131;
background: #fff;
border: 1px solid #e1e1e1;
}
.addnav .cont a.fb{
color: #fe732a;
}
.add_img{
display: block;
width: 48px;
height: 48px;
position: fixed;
right:20px;
bottom: 77px;
z-index:10;
background: black;
border-radius: 50%;
}
html
<div class="addnav" id="addnav">
<div class="cont" id="add_cont">
<a class="gr" href="javascript:void(0)">个人中心</a>
<a class="fb" href="javascript:void(0)">详情</a>
<a class="fh" id="btn-scroll" href="javascript:void(0)">返回顶部</a>
<span class="add_img1" id="add_img1"></span>
</div>
</div>
<span class="add add_img" id="add_img"></span>
js
function xuanf(){
var flag = 0; //标记是拖曳还是点击
var open = document.getElementById('add_img');
var add_cont = document.getElementById('add_cont');//弹窗div
var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;
open.addEventListener('touchstart',function(e){
flag = 0;
e.preventDefault();//阻止触摸时页面的滚动,缩放
disX = e.touches[0].clientX - this.offsetLeft;
disY = e.touches[0].clientY - this.offsetTop;
//手指按下时的坐标
starX = e.touches[0].clientX;
starY = e.touches[0].clientY;
});
open.addEventListener('touchmove',function(e){
flag = 0;
L = e.touches[0].clientX - disX ;
T = e.touches[0].clientY - disY ;
//移动时 当前位置与起始位置之间的差值
starXEnd = e.touches[0].clientX - starX;
starYEnd = e.touches[0].clientY - starY;
//移动的位置是否小于10
if (Math.abs(starYEnd) <= 10 && Math.abs(starXEnd) <= 10) {
return;
}
flag = 1;
if(L<0){//限制拖拽的X范围,不能拖出屏幕 距屏幕左侧12px
L = 12;
}else if(L > document.documentElement.clientWidth - this.offsetWidth){ //距屏幕右侧12px
L=document.documentElement.clientWidth - this.offsetWidth-12;
}
if(T<0){//限制拖拽的Y范围,不能拖出屏幕
T=0;
}else if(T>document.documentElement.clientHeight - this.offsetHeight){
T = document.documentElement.clientHeight - this.offsetHeight;
}
moveX = L + 'px';
moveY = T + 'px';
//弹窗跟随
var addleft = L-12 + 'px';
var addtop;
if(T<132){
addtop = 10 + 'px'
}else{
addtop = T-132 + 'px';
}
add_cont.style.left = addleft;
add_cont.style.top = addtop;
this.style.left = moveX;
this.style.top = moveY;
}, false);
open.addEventListener('touchend', function(e){
if (flag === 0) {
document.getElementById('addnav').style.display="block";
this.style.display="none";
}
e.preventDefault();
}, false);
}
xuanf();
var close = document.getElementById('add_img1');
close.onclick = function(){
document.getElementById('addnav').style.display="none";
document.getElementById('add_img').style.display="block";
}