h5滑动方向、手机拖动层
做h5时需对手指滑动方向判断及拖动浮动层，本文代码适用于手机端h5页面，pc页面可使用onMouseDown、onMouseUp、onMouseMove。
(本方法仅为功能实现原理和演示，可根据自己的需求修改代码。)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>手机端触屏手指滑动方向及拖动层</title>
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport">
<script type="text/javascript">
var touch_screen = {
//方向
direction: {
_clientX: 0,
_clientY: 0,
_moveX: 0,
_moveY: 0,
_startX: 0,
_startY: 0,
_object: null,
_direction: "no",
_controller: true,
//开始滑动、拖动
start: function() {
var self = this,
obj = self._object;
obj.addEventListener('touchstart', function(e) {
self._startX = e.touches[0].pageX;
self._startY = e.touches[0].pageY;
self._clientX = e.touches[0].clientX - parseInt(this.offsetLeft);
self._clientY = e.touches[0].clientY - parseInt(this.offsetTop);
self.move();
}, false);
obj.addEventListener('touchend', function(e) {
self._controller = true;
}, false);
},
//拖动滑动时
move: function() {
var self = this;
self._object.addEventListener('touchmove', function(e) {
if (self._controller) {
var endX, endY;
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
var direction = self.get_slide_direction(self._startX, self._startY, endX, endY);
switch (direction) {
case 0:
self._direction = "no";
break;
case 1:
self._direction = "right";
break;
case 2:
self._direction = "left";
break;
case 3:
self._direction = "down";
break;
case 4:
self._direction = "up";
break;
default:
}
self._controller = false;
}
e.preventDefault();
self._moveX = e.touches[0].clientX - self._clientX;
self._moveY = e.touches[0].clientY - self._clientY;
this.style.left = self._moveX + 'px';
this.style.top = self._moveY + 'px';
this.innerHTML = self._moveX + "|" + self._moveY + "|" + self._direction
}, false);
},
//计算滑动角度
get_slide_angle: function(a, b) {
return Math.atan2(a, b) * 180 / Math.PI;
},
//根据角度给出方向
get_slide_direction: function(a, b, c, d) {
var dy = b - d;
var dx = c - a;
var result = 0;
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result
}
var angle = this.get_slide_angle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 4;
} else if (angle >= 45 && angle < 135) {
result = 1;
} else if (angle >= -135 && angle < -45) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
},
//通过一个dom对象进行初始化
init: function(a) {
var class_clone = function(source) {
var result={};
for (var key in source) {
result[key] = typeof source[key]==="object" ? class_clone(source[key]) : source[key];
}
return result;
}
var self = class_clone(touch_screen.direction);
self._object = document.getElementById(a);
if (!self._object) {
alert('bind_object is not an object');
return false;
}
self.start();
}
}
} //页面加载完成
window.onload = function() {
touch_screen.direction.init("test_div");
touch_screen.direction.init("test_div2");
}
</script> <style type="text/css">
#test_div,#test_div2 {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #999;
position: absolute;
left: 0;
top: 0;
}
</style>
</head> <body>
<div id="test_div"></div>
<div id="test_div2"></div>
</body>
</html>
h5滑动方向、手机拖动层的更多相关文章
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...
- 判断scrollView的滑动方向（二）
在上一篇文章<判断scrollView的滑动方向>中谈到的第二种方法是根据滑动速率来判断的. 今天将通过滑动过程中的坐标差来判断 - (void)scrollViewDidScroll:( ...
- 《移动端浏览器Touch事件判断手指滑动方向方法》
$("body").on("touchstart", function(e) { e.preventDefault(); startX = e. ...
- js拖动层
模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...
- JQuery 拖动层
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 在chrome下鼠标拖动层变文本形状的问题
学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...
- web移动前端页面，jquery判断页面滑动方向
/*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...
- 对于移动端浏览器touch事件的研究总结（4）判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
- js根据鼠标方向划入遮罩层
js根据鼠标方向划入遮罩层: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- 项目安排(离散化+DP)
题目来源:网易有道2013年校园招聘面试二面试题 题目描述: 小明每天都在开源社区上做项目,假设每天他都有很多项目可以选,其中每个项目都有一个开始时间和截止时间,假设做完每个项目后,拿到报酬都是不同的 ...
- grape动态PHP结构（一）——目录结构与配置文件
一.结构介绍 结构的名字grape,中文名叫葡萄,因为最近一个同事经常带葡萄到公司给我们吃,受到启发想到了这个名字. 1)本结构需要在PHP5.5中运行,如果要在5.4中运行,有些地方就要做些修改 2 ...
- C++继承和多态
继承 访问控制 基类的成员函数可以有public.protected.private三种访问属性. 类的继承方式有public.protected.private三种. 公有继承 当类的继承方式为pu ...
- Web接口测试工具---Poster与Postman
工作当中有不少时间在编写和维护接口自动化测试用例.打算先整理一些接口相关工具的使用. 简单对接Web口测试的相关工具/技术做个划分. HTTP/SOAP协议接口的功能测试: 1.浏览器URL(GET请 ...
- hibernate笔记--单(双)向的多对多映射关系
在讲单向的多对多的映射关系的案例时,我们假设我们有两张表,一张角色表Role,一张权限表Function,我们知道一个角色或者说一个用户,可能有多个操作权限,而一种操作权限同时被多个用户所拥有,假如我 ...
- Mongo查询
这里主要是讲MongoDB在控制台中如何进行高级查询. 还有一句想提醒大家,多动手实验,才是硬道理. <,>,>=,<= 这四个就不用解释了,最常用的,也是最简单的. db.c ...
- what's this? 浅谈js中this的指向问题
刚刚学习js的朋友可能和我一样,看到代码中的this总是一脸懵逼,不知道this到底指向谁.经过一段时间的了解,我想跟大家分享下自己的理解. 何时出现this 函数在调用的时候,会自动获得两个特殊变量 ...
- [Java IO]06_JSON操作
6.1 JSON 知识背景 6.1.1 JSON 简介 JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法.类似 ...
- python处理空格脚本
博客园上传代码时拷贝vs里面的代码不能直接粘贴,否则空格会不符合要求 去掉空格代码 # -*- coding: utf-8 -*- '''打开delSpace.txt文本并删除每行开头的八个空格''' ...
- WCF的Restful和TCP方式调用性能比较
1. 实验背景关于WCF提供分布式访问服务,最常用的两种方式Restful方式和Tcp方式,在本地测试了一把.结果显示,还是Rest方式,在压力测试下,性能最佳.而且处于跨平台的考虑,和自动化测试方便 ...