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
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;
}
})
}
5.canvas的使用
canvas 画布
学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程
canvas API
beginPath 和 closePath
canvas中beginPath()与closePath()的使用 - 一个像夏天的个人空间 - OSCHINA - 中文开源技术交流社区
应用领域
原理
https://www.jb51.net/article/220742.htm
效果