移动端H5开发 (滑动事件)
最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法。(如写的不好,轻喷!)
直接贴代码
html css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>touch demo</title>
<style type="text/css">
#demo{
margin-top:200px;
height: 200px;
display: -webkit-box;
}
#demo1{
background: red;
width: 100%;
height: 200px;
}
#demo2{
background: blue;
width: 100%;
height: 200px;
}
body{
overflow: hidden;
}
</style>
</head>
<body>
<div id="demo">
<div id="demo1"></div>
<div id="demo2"></div>
</div>
</body>
</html>
js代码
var slideDom = document.getElementById("demo");//滑动区域
var length = slideDom.children.length;//子类节点长度
var index = 0;//初始下标
window.prevX = 0;
slideDom.addEventListener('touchstart', touchstart, false);
slideDom.addEventListener('touchmove', touchmove, false);
slideDom.addEventListener('touchend', touchend, false); //开始滑动
function touchstart(e){
var point = getPoint(e);
window.startX = point.pageX;
console.log(window.startX);
};
//滑动过程中
function touchmove(e){
e.preventDefault();//阻止默认行为
var point = getPoint(e);
window.moveX = point.pageX;
window.deltaX = window.moveX - window.startX;
domove(window.deltaX+window.prevX);
};
//结束滑动
function touchend(e){
var x = Math.abs(window.deltaX);
var item_w = document.getElementById("demo1").offsetWidth;
if(window.deltaX>0){
if(x>item_w){
var indexd = Math.round(x / item_w);
index = index - indexd;
}else{
if(x/item_w > 0.3){
index--
}
}
}else if(window.deltaX<0){
if(x>item_w){
var indexd = Math.round(x / item_w);
index = index + indexd;
}else{
if(x/item_w > 0.3){
index++;
}
}
}
if(index >= (length-1)){
index = length-1;
}
if(index <0 ){
index = 0;
}
window.prevX = -index*item_w;
domove(window.prevX,true);
};
//默认以第一个手指的位置计算
function getPoint(e) {
return e.touches ? e.touches[0] : e;
}; //利用transform移动
function domove(x,t){
if(t){
slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 300ms ease');
}else{
slideDom.setAttribute('style', 'transform: translate(' + x + 'px, 0px);transition:transform 0ms ease');
} };
如果用户是多指操作,默认以第一个手指的位置进行计算。
在事件结束时,对div移动的位置进行计算。
在 index的范围内,如果div移动范围超过的0.3;就在切换到下一index的div;
移动端H5开发 (滑动事件)的更多相关文章
- 移动端H5开发遇到的问题及解决方法
本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...
- 移动端H5开发自适应技巧
移动端H5开发,必要要做到自适应各种分辨率的手机,下面由我为大家大致说一下,需要3步走 第一:head标签中添加: <meta name="viewport" content ...
- 移动端 h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案.当时是CSS 和 JavaScript 分开写的.现在写这篇文章的时候感觉很多内容都是有内在联系的,所以不好分开. 给大家分享一下这半年来的感受吧: 知道和理解 ...
- 移动端 h5 开发相关内容总结——JavaScript 篇
1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...
- 移动端H5开发中的常见问题处理
1.问题之合成海报: 功能技术:http://html2canvas.hertzen.com 问题描述:合成模糊.合成区域内容错位,合成不完整,合成边缘白条等. 解决方案:如有页面布局正常合成错位的, ...
- 转---移动端 h5开发相关内容总结——CSS篇
作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...
- 移动端 h5开发相关内容总结——CSS篇
1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ...
- 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应
Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...
- 移动端js手指滑动事件初体验
今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...
随机推荐
- C#全局鼠标键盘Hook
原文出自:http://www.cnblogs.com/iEgrhn/archive/2008/02/17/1071392.html using System; using System.Collec ...
- Android getAttributeIntValue()详解-霞辉
经常使用getAttributeIntValue()方法,但是大多使用的形式是attrs.getAttributeFloatValue(null, "xxx", 0);只是在中间传 ...
- JavaScript实现
JavaScript实现 Javascript实现虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多.没错, ...
- Pycharm集成PyQt4并使用
- 27. Remove Element - 移除元素-Easy
Description: Given an array and a value, remove all instances of that value in place and return the ...
- How do you make an awesome team?(来考验一下自己的英语能力吧)
How do you make an awesome team? I was talking to my awesome friend Amy Hanlon (who is a software en ...
- 微信小程序评分功能
很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下: 我写的是5分满分制的,首先,准备3个图片, ,像这样的,分别代表分数为0,0.5,1 时的状态, 效果图:(以3. ...
- poptest分享计划以及提供的服务
poptest分享计划以及提供的服务 POPTEST致力于测试开发工程师的培养,能让学员经过系统培训后从事自动化测试工作,包括功能自动化.性能自动化.接口自动化以及移动端系统的自动化测试等,由于移动端 ...
- Android 学习笔记之实时保存数据-现场保护onSaveInstanceState()
数据保存:在软件开发中我们希望保存下各个Activity数据,以实现客户数据的时时保存,达到较好的用户体验. 那么我们需要解决如下问题: 1.什么时候保存? 2.保存哪些数据? 我想保存应用产 ...
- Ubuntu离线安装Sogou拼音(附老版本安装&输入法自启动)
跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 离线安装的基础可以看看这篇文章的 前期准备工作 http://www.cnbl ...