zoukankan      html  css  js  c++  java
  • weui 可移动悬浮按钮


    @CHARSET "UTF-8";
    /** 右下角跳转按钮 跳转到列表 */
    #list_note_icon
    {
    position: fixed;
    bottom: 10%;
    right: 8%;
    z-index: 888;
    background: #ff9900;
    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;
    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;
    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
    {
    2px;
    height: 56px;
    left: 39px;
    top: 12px;
    }

    #add_note_icon:after
    {
    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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    201301 JAVA题目0-1级, 华为笔试题
    病毒传播, 美团笔试题
    OC基础 字符串
    IOS OC语言基础(一)类的创建
    pyautogui 鼠标精灵模拟登陆
    ajax hook注入
    aiohttp异步请求
    IOS自学教程大全
    提高python工具包
    Kafka与Flume区别
  • 原文地址:https://www.cnblogs.com/apolloren/p/10952084.html
Copyright © 2011-2022 走看看