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
版权声明：本文为博主原创文章，转载请附上博文链接！
最新文章
- JDBC增删改查简单测试
- 关于rails里集成测试assert_template的写法
- LINUX下NFS系统的安装配置
- windows下关闭进程
- 黑马程序员——【Java高新技术】——JDK1.5新特性：静态导入、可变参数、增强型for循环、自动装箱拆箱、枚举
- HashMap存储数据赋值javabean简单示例
- 用js实现返回上一页
- 修复Debian（Ubuntu）Grub2 引导
- App推广干货，排名数据分析优化效果
- OM Price Lists
- 301页面转向 php
- 【设计模式 - 19】之观察者模式（Observer）
- Online Procurement Auctions for Resource Pooling in Client-Assisted Cloud Storage Systems---INFOCOM 2015
- Redis的简单使用和介绍
- VS2013 OpenGL 开发程序时: error LNK2019: 无法解析的外部符号 __imp____glutInitWithExit@12,error LNK2019: 无法解析的外部符号 __imp____glutCreateWindowWithExit@8
- webpack的build的时候时间长处理方案
- mysql数据库字符集相关操作（修改表字段编码，使其支持emoji表情）
- 还原Stack操作
- Monkey学习网址
- Flutter dart:convert