zoukankan      html  css  js  c++  java
  • 用hammer实现触摸 pan 方法

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title>触摸</title>
            <style type="text/css">
                #box {
                    width: 200px;
                    height: 200px;
                    background: orangered;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            </style>
            
        </head>
    
        <body>
            <div id="box">
    
            </div>
        </body>
    
        <script src="hammer.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var oBox = document.getElementById("box");
            //创建实例
            var hammer = new Hammer(oBox);
    
            hammer.get('pan').set({
                direction: Hammer.DIRECTION_ALL
            });
            hammer.on("panstart", function(event) {
                var left = oBox.offsetLeft;
                var tp = oBox.offsetTop;
    
                hammer.on("panmove", function(event) {
                    oBox.style.left = left + event.deltaX + 'px';
                    oBox.style.top = tp + event.deltaY + 'px';
                });
            })
        </script>
    
    </html>
  • 相关阅读:
    drf3
    字典的操作方法
    列表的操作方法
    字符串的操作方法
    while循环和基本运算符
    初识数据类型
    USDT相关
    带团队
    CentOS7更改时区及同步网络时间
    mac胡刷新dns
  • 原文地址:https://www.cnblogs.com/150536FBB/p/9787515.html
Copyright © 2011-2022 走看看