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
版权声明:本文为博主原创文章,转载请附上博文链接!
weui 可移动悬浮按钮的更多相关文章
- 在TableView上添加悬浮按钮
如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬 ...
- Android FloatingActionButton(FAB) 悬浮按钮
FloatingActionButton 悬浮按钮 ...
- Android用悬浮按钮实现翻页效果
今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在An ...
- 如何在TableView上添加悬浮按钮
如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬 ...
- (IOS)悬浮按钮Demo
思路:传入一个底层的view,将悬浮按钮(用view实现)和展开的子按钮列表add在其上,子按钮列表开始将坐标和悬浮按钮对应好后先将其隐藏,悬浮按钮识别到tap手势后触发展示子按钮列表的方法.通过在t ...
- Android 5.0新控件——FloatingActionButton(悬浮按钮)
Android 5.0新控件--FloatingActionButton(悬浮按钮) FloatingActionButton是5.0以后的新控件,一个悬浮按钮,之所以叫做悬浮按钮,主要是因为自带阴影 ...
- FloatingActionButtonDemo【悬浮按钮的使用,顺带snackBar的使用】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FloatingActionButton简称FAB. 一. 对于App或某个页面中是否要使用FloatingActionButton ...
- FloatingActionButton(悬浮按钮)使用学习<一>
FloatingActionButton简称FAB. 一. 对于App或某个页面中是否要使用FloatingActionButton必要性: FAB代表一个App或一个页面中最主要的操 ...
- QSplitter实现滑动窗口和悬浮按钮
1 QSplitter实现滑动窗口和悬浮按钮 软件应用中需要设计右侧滑动窗口,通过一个按钮来实现窗口的隐藏和显示,应用场景比如显示主界面的详细信息. (1) 在qt design中 ...
随机推荐
- Caused by: java.lang.IllegalArgumentException: DefaultSerializer requires a Serializable payload but received an object of type [VCodeModel]
2019-08-20 17:53:24,054 [ERROR] [http-nio-8047-exec-1] [HttpResult.java : 143] 系统异常 org.springframew ...
- 评估预测函数(3)---Model selection(选择多项式的次数) and Train/validation/test sets
假设我们现在想要知道what degree of polynomial to fit to a data set 或者 应该选择什么features 或者 如何选择regularization par ...
- 神经网络(10)--有助于对神经网络Backpropagation算法的理解
为了更好的理解backpropagation,先来了解一下forward propagation的内部 我们在forward propagation中计算Z1(3)的方法与在back propagat ...
- HtmlAgilityPack解析html文档
一.概述 HtmlAgilityPack(以下简称HAP)是一个基于.Net的.第三方免费开源的微型类库,主要用于在服务器端解析html文档. HtmlAgilityPack为网页提供了标准的DOM ...
- docker 进程 转载:https://www.cnblogs.com/ilinuxer/p/6188303.html
今天我们会分析Docker中进程管理的一些细节,并介绍一些常见问题的解决方法和注意事项. 容器的PID namespace(名空间) 在Docker中,进程管理的基础就是Linux内核中的PID名空间 ...
- Django示例演示--?
引用自:https://blog.csdn.net/weixin_42950386/article/details/83143293 定义模型类 模型类被定义在"应用/models.py&q ...
- JS+rem,移动端适配
window.onresize = function () { setHtmlFz(); } setHtmlFz(); function setHtmlFz() { // 基础值 var baseVa ...
- NOIP 2017 PJ
T1:水 T2:水 T3:水 T4:水,二分+DP检测+单调队列优化,然而优化写炸了,还没暴力分高 所以爆炸 (民间)100 + 100 + 100 + 10 = 310 GAME OVER
- 非自增编号字段,避免生成重复编号(以pdfNo编号为例)RedisLock/ReadLock
非自增编号字段,避免生成重复编号(以pdfNo编号为例) 有个场景,用户查询延误航班信息,然后生产一个编号,默认第一个编号是1000001,其后新增的编号默认自增加1.每次有人来查延误信息,如果延误信 ...
- JQuery通过click事件获取当前点击对象的id,name,value属性等
$(".test").click(function () { var val=$(this).attr("id"); })