前端学习：触摸事件的长按，双击，滑动，图片翻转，百度地图SDK，canvas的使用

拾歡

已于 2022-08-11 22:09:44 修改

阅读量1k

点赞数 1

文章标签：前端学习 javascript

于 2022-08-09 11:32:12 首次发布

本文链接：https://blog.csdn.net/qq_45926448/article/details/126234557

版权

1.触摸事件的长按，双击，滑动，跟随移动效果

1.1原生js实现

双击：用中间变量记录上一秒触摸开始的时间，与当前触摸开始的时间差与300ms比，如果小于就为双击

 // 双击
        var previousTime = 0;
        div.ontouchstart = function () {
            var currentTime = Date.now();
            if(currentTime - previousTime < 300){
                console.log("双击  ----- ");
            }
            previousTime = currentTime;
        }

长按：用布尔值判定定义全局布尔值为false，当触摸开始时，将布尔值变为true，然后开启延时器，延迟时间为1秒（判断是否长按），如果在这1秒内，触摸没结束即布尔值还为true就是长按，在触摸结束后清除延时器，将全局变量置为false。

 var isLong=false;
        var timer=null;
        div.ontouchstart=function(){
            isLong=true;
            timer=setTimeout(()=>{
                if(isLong){
                    console.log("长按");
                }
            },1000);
        }
        div.ontouchend=function(){
            isLong=flase;
            clearTimeout(timer);
        }

滑动：

1.2 利用插件来判定是否单击，双击，长按，以及上下左右的滑动

移动的手势封装在了touch.js 中，使用时要先引入zepto.js 再引入touch.js

zepto.js 跟 jquery 一样的使用方法

  // 'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
        // 'doubleTap', 'tap', 'singleTap', 'longTap'

        // tap 单击
        $("div").tap(function () {
            console.log("单击 1")
        })

        $("div").singleTap(function () {
            console.log("单击")
        })
        $("div").longTap(function () {
            console.log("长按  ")
        })

        $("div").doubleTap(function () {
            console.log("双击  ")
        })


        $("div").swipe(function () {
            console.log("滑动事件  ")
        })
        $("div").swipeLeft(function () {
            console.log(" 左  滑动事件  ")
        })
        $("div").swipeRight(function () {
            console.log(" 右  滑动事件  ")
        })
        $("div").swipeUp(function () {
            console.log(" 上 滑动事件  ")
        })
        $("div").swipeDown(function () {
            console.log(" 下 滑动事件  ")
        })

2. 翻转

两个页面翻转，让其后背隐藏：backface-visibility: hidden;

让后面的页面绕Y轴旋转180度，在给装这两个页面的元素开启3d效果以及景深，hover时让盒子翻转

 .stage {
            perspective: 500px;

        }
        .box {
            transform-style: preserve-3d;
            /* font-size: 0; */
            /* background: red; */
            width: 259px;
            height: 310px;
            border: solid 1px red;
            margin: 100px auto;
            transition: all 1s linear;
        }
        img {
            position: absolute;
            backface-visibility: hidden;
            
        }

        img:first-child {
            z-index: 99;
        }
        img:last-child {
            transform: rotateY(180deg);
        }

        .box:hover{
            transform: rotateY(180deg);

        }


  <div class="stage">
        <div class="box">
            <img src="./1.png" alt="">
            <img src="./2.png" alt="">
        </div>
    </div>

3.百度地图的使用——SDK

SDK 软件开发工具包：提供各种api

地图 JS API | 百度地图API SDK

4. 原生定位

  navigator.geolocation.getCurrentPosition(function (position) {
                console.log("成功 ===", position.coords.latitude, position.coords.longitude);
            }, function (err) {
                console.log("失败 ===", err);
                switch (err.code) {
                    case err.PERMISSION_DENIED:
                        console.log("权限问题")
                        break;

                    case err.POSITION_UNAVAILABLE:
                        console.log("出错了")
                        break;

                    case err.TIMEOUT:
                        console.log("超时")
                        break;

                    default:
                        break;
                }
            })
        }