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 ...
随机推荐
- Ubuntu部署Asp.net core网站无法访问
前几天应工作需要,在阿里云上部署一个测试站点.本以为分分钟的事情,没想到打脸了. 当时直接新建一个webapi项目,publish后直接上传到阿里云,随后设置nginx转发网站端口5000. 接着打开 ...
- redis 出现(error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details
如果在ubuntu安装的redis含端口使用,但是某些时候常常出现 (error) MISCONF Redis is configured to save RDB snapshots, but is ...
- chrome安装扩展插件出现-crx_header_invalid问题
1. 将*.crx文件重命名为*.rar 2.将rar文件解压 3. 在chrome浏览器添加扩展程序时选择“加载已解压的扩展程序” 4.添加成功
- 关于.NET中的控制反转及AutoFac的简单说明
目录 1.控制反转 1.1 什么是依赖? 1.2 什么是控制反转? 1.3 什么是依赖注入? 1.4 简单总结 2.控制反转容器 2.1 IOC容器说明 2.2 使用AutoFac的简介示例 3 使用 ...
- selenium 爬boss
# 有问题 from selenium import webdriver import time from lxml import etree class LagouSpider(object): d ...
- requests.exceptions.SSLError报错
requests.exceptions.SSLError: HTTPSConnectionPool(host='www.baidu.com', port=443): Max retries excee ...
- Mac Maven安装与配置
下载 官网地址:http://maven.apache.org/download.cgi 配置环境变量 总步骤 编辑.bash_profile文件 vim ~/.bash_profile 配置mave ...
- 从源码看 PHP 7 数组的实现
本文所用源码为 PHP 7.4.4 的版本. PHP 7 数组概述 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当 ...
- vue练手项目——桌面时钟
用vue实现一个简单的网页桌面时钟,主要包括时钟显示.计时.暂停.重置等几个功能. 效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时.分.秒为当前实际时间,点击计时器按钮后,页面变成一个计时器, ...
- 项目中 关于localstorage、cookie的坑？明明设置了本地存储为什么没生效
1.简单的介绍一下localStorage,sessionStorage,cookie localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏 ...