h5可拖动悬浮按钮_weui 可移动悬浮按钮

@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 文件

退出

js 文件

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() {

//取消操作

});

});

---------------------

作者：动物生态圈

来源：CSDN

原文：https://blog.csdn.net/nulixuexu/article/details/80591591

版权声明：本文为博主原创文章，转载请附上博文链接！