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 文件
<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
版权声明:本文为博主原创文章,转载请附上博文链接!
相关文章
- [转载]【基础篇】不为人知的Maya移动坐标轴
- 移动文件夹
- 动画 -- 点击按钮 -- 向右下方移动
- 使用vw做移动端页面的适配
- 移动端适配:font-size设置的思考
- 【Android】自定义view-拖动小球移动
- vue.js 3.2.20:拖动创建div及移动、缩放、删除等操作
- 移动距离(模拟)
- Java //PP2.14 按照以下要求修改程序Snowman: ·在其身上添加两个红色按钮。·将雪人的表情由笑脸变成皱眉。·把太阳移动到图片的右上角。·在图片左上角显示你的名字。。。
- Qt之实现物体移动(QPainter)
- c# 可移动可改变大小的控件
- linux 光标移动到行首、行尾
- [Phonegap+Sencha Touch] 移动开发36 Phonegap/Cordova项目的图标和启动画面(splashscreen)配置
- 内网渗透(三十三)之横向移动篇-利用远控工具RustDESK横向移动
- 内网渗透(三十)之横向移动篇-利用远控工具向日葵横向移动
- jquery案例17——手机端监听点击、长按、移动事件