touch方向锁定
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:200px; height:200px; background:#CCC; transform:translate(0px,0px);}
</style>
<script>
window.onload=function (){
let oBox=document.getElementsByClassName('box')[0];
let x=0,y=0; oBox.addEventListener('touchstart', function (ev){
let dir=''; let disX=ev.targetTouches[0].clientX-x;
let disY=ev.targetTouches[0].clientY-y; let startX=ev.targetTouches[0].clientX;
let startY=ev.targetTouches[0].clientY; function fnMove(ev){
if(dir==''){
//等待方向确定——用户超出5px
if(Math.abs(ev.targetTouches[0].clientX-startX)>=5){
dir='x';
}else if(Math.abs(ev.targetTouches[0].clientY-startY)>=5){
dir='y';
}
}else{
if(dir=='x'){
x=ev.targetTouches[0].clientX-disX;
}else if(dir=='y'){
y=ev.targetTouches[0].clientY-disY;
} oBox.style.transform=`translate(${x}px,${y}px)`;
}
}
function fnEnd(){
oBox.removeEventListener('touchmove', fnMove, false);
oBox.removeEventListener('touchend', fnEnd, false);
} oBox.addEventListener('touchmove', fnMove, false);
oBox.addEventListener('touchend', fnEnd, false);
}, false);
};
</script>
</head>
<body>
<div class="box"> </div>
</body>
</html>
targetTouches vs touches
1.兼容
跟按下的位置相比，如果横向移动超过5px，锁定为水平；如果纵向移动超过5px，锁定为垂直
1.阶段一、方向确定之前——压根不动
2.阶段二、方向已经确定了，再动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<style media="screen">
* {margin:0; padding:0; list-style:none;}
html {font-size:10px} header {width:48rem;height:5.5rem;background:#fe5400; overflow:hidden; position:relative; z-index:99;} header h1 {width:4.4rem; height:3.7rem; background:url(img/logo.png) no-repeat; text-indent:-9999rem; background-size:100% 100%; margin-left:0.6rem; margin-top:1rem;} /*banner*/
.banner {width:48rem; height:15rem; position:relative; overflow:hidden;}
.banner ul {width:999rem; height:15rem; overflow:hidden; transform:translateX(-48rem);}
.banner ul li {width:48rem; height:15rem; float:left;}
.banner ul li img {width:100%; height:100%;}
.banner ol {position: absolute; right:0; bottom: 1.3rem;}
.banner ol li {width:1rem; height:1rem; border:1px solid #333; background:white; border-radius:50%; margin:0 0.4rem; opacity:0.6; float:left;}
.banner ol li.active {background:#ff5501; border:1px solid #d0a793; opacity:1} /**/
.page_content {background:white; position:relative; top:-5rem;} .load {height:5rem; line-height:5rem; text-align:center; font-size:2rem;}
</style>
<script>
window.onresize=function (){
document.documentElement.style.fontSize=document.documentElement.clientWidth/48+'px';
}; window.onresize(); window.onload=function (){
let oBanner=document.querySelector('.banner');
let oBannerUl=oBanner.children[0];
let oBannerUlLi=oBannerUl.children;
let oPageContent=document.querySelector('.page_content');
let oLoad=document.querySelector('.load');
let aOlLi=document.querySelectorAll('.banner ol li'); //
oBannerUl.appendChild(oBannerUlLi[0].cloneNode(true));
oBannerUl.insertBefore(oBannerUlLi[oBannerUlLi.length-2].cloneNode(true), oBannerUlLi[0]); let x=-oBannerUlLi[0].offsetWidth,y=0; oBanner.addEventListener('touchstart', function (ev){
oPageContent.style.transition='none';
oBannerUl.style.transition='none'; let startX=ev.targetTouches[0].clientX;
let startY=ev.targetTouches[0].clientY; let disX=startX-x;
let disY=startY-y; let dir=''; function fnMove(ev){
if(dir==''){
if(Math.abs(ev.targetTouches[0].clientX-startX)>=5){
dir='x';
}else if(Math.abs(ev.targetTouches[0].clientY-startY)>=5){
dir='y';
}
}else{
if(dir=='x'){
x=ev.targetTouches[0].clientX-disX;
}else{
y=ev.targetTouches[0].clientY-disY;
} oBannerUl.style.transform=`translateX(${x}px)`; if(y>0){
oPageContent.style.transform=`translateY(${y/3}px)`; if(y>200){
oLoad.innerHTML='松手';
}else{
oLoad.innerHTML='下拉刷新';
}
}else{
oPageContent.style.transform=`translateY(${y}px)`;
}
}
}
function fnEnd(){
oBanner.removeEventListener('touchmove', fnMove, false);
oBanner.removeEventListener('touchend', fnEnd, false); if(y>0){
y=0;
oPageContent.style.transition='0.3s all ease';
oPageContent.style.transform=`translateY(0px)`;
} //
let n=Math.round(-x/oBannerUl.children[0].offsetWidth);
x=-n*oBannerUl.children[0].offsetWidth; console.log(n, oBannerUlLi.length); if(n==oBannerUlLi.length-1){
x=-oBannerUlLi[0].offsetWidth;
oBannerUl.style.transition='';
oBannerUl.style.transform=`translateX(${x}px)`;
n=1;
Array.from(aOlLi).forEach((li,index)=>{
li.className=index==0?'active':'';
})
return
}else if(n==0){
x=-(oBannerUlLi.length-2)*oBannerUlLi[0].offsetWidth;
oBannerUl.style.transition='';
oBannerUl.style.transform=`translateX(${x}px)`;
n=oBannerUlLi.length-1;
Array.from(aOlLi).forEach((li,index)=>{
li.className=index==oBannerUlLi.length-2?'active':'';
})
return
}
oBannerUl.style.transition='0.3s all ease';
oBannerUl.style.transform=`translateX(${x}px)`; Array.from(aOlLi).forEach((li,index)=>{
li.className=index==n?'active':'';
})
} oBanner.addEventListener('touchmove', fnMove, false);
oBanner.addEventListener('touchend', fnEnd, false);
}, false);
};
</script>
</head>
<body>
<header>
<h1>淘宝网</h1>
</header>
<div class="load">
下拉刷新
</div>
<div class="page_content">
<section class="banner">
<ul>
<li><img src="img/banner1.jpg" /></li>
<li><img src="img/banner2.jpg" /></li>
<li><img src="img/banner1.jpg" /></li>
<li><img src="img/banner2.jpg" /></li>
<li><img src="img/banner1.jpg" /></li>
<li><img src="img/banner2.jpg" /></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</section>
<nav> </nav>
</div>
</body>
</html>
touch方向锁定的更多相关文章
- IONIC屏幕方向锁定
如果希望阻止app在设备旋转时发生横屏,可以使用这个插件: cordova plugin add cordova-plugin-screen-orientation // set to either ...
- iOS如何用代码控制以不同屏幕方向打开新页面？
转载:http://blogread.cn/it/article/7765?f=wb#original 代码示例:https://github.com/johnlui/Swift-On-iOS/tre ...
- UI: 概述, 启动屏幕, 屏幕方向
UI 设计概述 启动屏幕(闪屏) 屏幕方向 示例1.UI 设计概述UI/Summary.xaml <Page x:Class="Windows10.UI.Summary" x ...
- 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向
[源码下载] 背水一战 Windows 10 (2) - UI: 概述, 启动屏幕, 屏幕方向 作者:webabcd 介绍背水一战 Windows 10 之 UI UI 设计概述 启动屏幕(闪屏) 屏 ...
- iOS开发常见BUG和一些小技巧（ps:耐心看完，很实用）
[385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright ...
- iOS开发中遇到的一些问题及解决方案【转载】
iOS开发中遇到的一些问题及解决方案[转载] 2015-12-29 [385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Creat ...
- iscroll源码初涉
最近尝试做web app时候,用上了神器iScroll,鉴于功力尚浅,并没有完全用好神器,所以今天特意来认真学习! 翻开官网,目前的版本是5,但是相关的文章并不多,具体的文件版本是: iscroll. ...
- iscroll-lite.js源码注释
/*! iScroll v5.1.2 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */ (function (window, ...
- linux命令汇总1
允许非root用户使用“sudo” root身份登录系统,执行“visudo”,根据示例添加新的一个规则(记住输入的密码是当前用户密码,而不是root密码)#不需要密码执行sudo命令hadoop ...
随机推荐
- Cisco asa组建IPSEC for ikev1
IPSec的实现主要由两个阶段来完成:--第一阶段,双方协商安全连接,建立一个已通过身份鉴别和安全保护的通道.--第二阶段,安全协议用于保护数据的和信息的交换. IPSec有两个安全协议:AH和ESP ...
- python初学者必看学习路线图！！！
python应该是近几年比较火的语言之一,很多人刚学python不知道该如何学习,尤其是没有编程基础想要从事程序员工作的小白,想必应该都会有此疑惑,包括我刚学python的时候也是通过从网上查找相关资 ...
- 服务器上监控tomcat，如果挂掉则重启
该脚本用于监控tomcat服务器是否可用,如果服务不可用则重启tomcat 略微修改后也可以用于其他服务的监控 monitor.sh 脚本如下 #!/bin/sh # 定义要监控的页面地址 WebUr ...
- 【春招】 java static 执行顺序
package static类型.执行顺序; public class Test { Person person = new Person("Test"); static{ Sys ...
- Git的使用流程及常用命令汇总
Git是一个很好用的版本控制系统,本文对于常用的一些命令进行了汇总. 创建一个存储仓库(repository) https://github.com/右上角点击"+"号,New r ...
- ggplot2（6） 标度、坐标轴和图例
6.1 简介 标度控制着数据到图形属性的映射.标度将我们的数据转化为视觉上可以感知的东西:例如大小.颜色.位置和形状.标度也为我们提供了读图时所使用的工具:坐标轴和图例. 执行标度的过程分为三步:变换 ...
- 机器学习实用案例解析（1） 使用R语言
简介 统计学一直在研究如何从数据中得到可解释的东西,而机器学习则关注如何将数据变成一些实用的东西.对两者做出如下对比更有助于理解“机器学习”这个术语:机器学习研究的内容是教给计算机一些知识,再让计算机 ...
- JVM入门必看——JVM结构
转载自:http://blog.csdn.net/yfqnihao 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让 ...
- 【分布式锁】05-使用Redisson中Semaphore和CountDownLatch原理
前言 前面已经写了Redisson大多的内容,我们再看看Redisson官网共有哪些组件: image.png 剩下还有Semaphore和CountDownLatch两块,我们就趁热打铁,赶紧看看R ...
- [BJDCTF 2nd]fake google
[BJDCTF 2nd]fake google 进入页面: 试了几下发现输入xxx,一般会按的格式显示, P3's girlfirend is : xxxxx 然后猜测会不会执行代码,发现可以执行 & ...