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>
  • 相关阅读:
    NOI 题库 7084
    NOI 题库 7218
    POJ 2386 题解
    NOI 题库 8465
    NOI 题库 2753
    NOI 题库 1792
    P3709 大爷的字符串题
    初探莫队
    P1026 统计单词题解
    AC自动机小记
  • 原文地址:https://www.cnblogs.com/150536FBB/p/9787515.html
Copyright © 2011-2022 走看看