当先锋百科网

首页 1 2 3 4 5 6 7

【Javascript】进阶之利用touch.js让熊猫旋转

描述: 按住图片进行旋转 让图片跟随鼠标进行对应方向的旋转

在这里插入图片描述

touch.js

touch.on('div', 'swipe tap', 'p,li', function(ev){
    ev.startRotate(); // 开始旋转
    console.log(ev); // CustomEvent 事件对象
    console.log(ev.originEvent); // 原生事件对象
    console.log(ev.type); // 事件类型
    console.log(ev.target, ev.srcElement); // 触发源
    console.log(ev.position); // 鼠标的位置
    console.log(ev.direction); // 滑动方向
    console.log(ev.distanceX, ev.distanceY); // 滑动的距离
    console.log(ev.rotation); // 旋转角度
    console.log(ev.fingersCount); // 手指数量
    console.log(ev.distance); // 移动的距离
    console.log(ev.duration); // 时长 touchstart到touchend 
});

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div#play{
            background: #666;
            text-align: center;
        }
        img{
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="play">
        <img src="img/timg.png" id="target" />
    </div>
    <div id="box1"></div>

    <script src="./js/touch.js"></script>
    <script>
        // 按住图片进行旋转 让图片跟随鼠标进行对应方向的旋转
        touch.on('img', 'touchstart', function(ev){
            ev.startRotate();
        });

        // 获取元素
        var img = document.getElementsByTagName('img')[0];
        // console.log(img);
        var angle = 0; // 存储当前移动的角度
        touch.on('img', 'rotate', function(ev){
            // console.log(ev.rotation);
            img.style.transform = 'rotate(' + (ev.rotation + angle) + 'deg)';

            // angle: 上一次结束的位置
            // ev.rotation: 旋转的角度  不是图片当前的角度
            // 图片结束角度: 上一次结束的位置 + 本次旋转的角度

            // console.log(ev);
            // console.log(ev.rotation);
            if(ev.fingerStatus == 'end'){
                // 移动已经结束  结束的位置 是下一次开始旋转的位置
                angle = angle + ev.rotation;
            }
        });
    </script>
</body>
</html>