登录
0800800.com
    
 频道栏目

 查询

标题 内容

 最新评论

 最新图库

 博客统计
  • 今日数:0
  • 文章数:587
  • 收藏数:4
  • 图片数:67
  • 评论数:94
  • 开设时间:2006-3-2
  • 更新时间:2019年11月19日

  •  网友正查看的网页

     友情链接


    2017-9-6 22:21:04   晴天 
    开新窗口访问该主题 手机移动端网站触屏可拖动悬浮球
    程序代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>手机移动端网站触屏可拖动悬浮球</title>
    <style>
    #touch {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 600px;
    top: 300px;
    margin-left: -30px;
    margin-top: -30px;
    z-index: 999999;
    }
    #simple-menu {

    cursor: move;
    }
    </style>
    </head>

    <body>
    <!-- 代码开始 -->
    <div id="touch" style="width: 120px; height: 120px; position: absolute;">
    <img id="simple-menu" src="http://m.medwant.com/images/mdlogo.png" onclick="onClick()" style="width: 120px; height: 120px;" />
    </div>
    <script>
    var div = document.getElementById('touch');
    div.addEventListener('touchmove',function(event) {
    event.preventDefault();//阻止其他事件
    // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
    div.style.left = touch.pageX + 'px';
    div.style.top = touch.pageY + 'px';
    div.style.background = "";
    }
    }, false);

    function onClick() {
    alert('你敢点我!');
    }
    </script>

    </body>
    </html>


    点击查看效果
    Admin 发表于 代码 | 评论(0) | 阅读(134)


    评论

    您的昵称:
    文章内容:
        您可以使用[Ctrl+Enter]或[Alt+S]来提交