浮动按钮移动

0 篇文章 0 订阅
@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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值