weui 可移动悬浮按钮

标签：文章   before   window   confirm   eui   pre   primary   rip   opacity   

@CHARSET "UTF-8";
/** 右下角跳转按钮 跳转到列表 */
#list_note_icon
{
position: fixed;
bottom: 10%;
right: 8%;
z-index: 888;
background: #ff9900;
width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 2px 2px 2px #888888;
opacity:0.7 ;
}

#list_note_icon:before
{
content: "";
display:block;
background:#333;
position:absolute;
height:3px;
width:40px;
top:24px;
left:20px;
box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
-webkit-box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
-moz-box-shadow:0 10px #333, 0 20px #333, 0 30px #333;
}

/** 右下角跳转按钮 跳转到添加页 */
#add_note_icon
{
position: fixed;
bottom: 10%;
right: 8%;
z-index: 888;
background: #ff9900;
width: 80px;
height: 80px;
border-radius: 40px;
box-shadow: 2px 2px 2px #888888;
opacity:0.7 ;
}

#add_note_icon:before, #add_note_icon:after
{
content: "";
display:block;
background:#333;
position:absolute;
}

#add_note_icon:before
{
width: 2px;
height: 56px;
left: 39px;
top: 12px;
}

#add_note_icon:after
{
width: 56px;
height: 2px;
left: 12px;
top: 39px;
}
html 文件

<a class="weui-btn weui-btn_mini weui-btn_primary" id="list_note_icon">退出</a>
js 文件

<script>
var list_note_icon = document.getElementById(‘list_note_icon‘);
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var endTouchY = 0;
var endTouchX = 0;
list_note_icon.addEventListener(‘touchstart‘,function(ev){
this.addEventListener(‘touchmove‘, function(ev){
ev.preventDefault();
var ev = ev.touches[0];
list_note_icon.style.top = (ev.pageY-75)+‘px‘;
list_note_icon.style.left = (ev.pageX-75)+‘px‘;
endTouchX = ev.pageX;
endTouchY = ev.pageY;
},false);
this.addEventListener(‘touchend‘, function(ev){
this.ontouchmove = null;
this.ontouchend = null;
var x = (endTouchX-75)>0?(endTouchX-75):0;
var y = (endTouchY-75)>0?(endTouchY-75):0;
x = (x>(winWidth-150))?(winWidth-150):x;
y = (y>(winHeight-150))?(winHeight-150):y;
list_note_icon.style.left = x + ‘px‘;
list_note_icon.style.top = y + ‘px‘;
},false);
},false);


$(document).on("click", "#list_note_icon", function() {
$.confirm("您确定返回到首页吗?", "", function() {
location.href = "${pageContext.request.contextPath}/index";
}, function() {
//取消操作
});
});

</script>

---------------------
作者：动物生态圈
来源：CSDN
原文：https://blog.csdn.net/nulixuexu/article/details/80591591
版权声明：本文为博主原创文章，转载请附上博文链接！

weui 可移动悬浮按钮

标签：文章   before   window   confirm   eui   pre   primary   rip   opacity   

原文地址：https://www.cnblogs.com/apolloren/p/10952084.html