hammer实现手势触摸缩小 pinch方法 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 500px;
                margin: 0 auto;
            }
        </style>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>

    <body>
        <div class="box">
            <img src="../canvas/1.png" />
        </div>
        <script src="hammer.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var oImg = document.querySelector("img");
            var oBox = document.querySelector(".box");
            var hammer = new Hammer(oBox);
            var oImg = new Hammer(oImg);
            oImg.get('pan').set({
                direction: Hammer.DIRECTION_ALL
            });
            oImg.on("panstart", function(event) {
                var left = oImg.offsetLeft;
                var tp = oImg.offsetTop;

                oImg.on("panmove", function(event) {
                    oImg.style.left = left + event.deltaX + 'px';
                    oImg.style.top = tp + event.deltaY + 'px';
                });
            })
            hammer.get('pinch').set({
                enable: true
            });
            hammer.on("pinchstart", function(e) {
                hammer.on("pinchout", function(e) {
                    oImg.style.transition = "-webkit-transform 1000ms ease-out";
                    oImg.style.webkitTransform = "scale(2.5)";
                });
                hammer.on("pinchin", function(e) {
                    oImg.style.transition = "-webkit-transform 1000ms ease-out";
                    oImg.style.webkitTransform = "scale(1)";
                });

            })
        </script>
    </body>

</html>

 

posted @ 2018-10-14 19:28  氧化成风  阅读(1402)  评论(0)    收藏  举报