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= ...
随机推荐
- 国内版Office 365和Azure AAD绑定的问题及解决方案
背景: 1． 开发人员要做的事情,是希望在应用程序里面能调用Office 365 的API(Microsoft Graph)来动态添加Office 365账号 2． 如果需要调用这些API,必须在 ...
- 窥探Swift之数组安全索引与数组切片
今天是元宵节,祝大家元宵节快乐!在Swift中的数组和字典中下标是非常常见的,数组可以通过索引下标进行元素的查询,字典可以通过键下标来获取相应的值.在使用数组时,一个常见的致命错误就是数组越界.如果在 ...
- iOS开发之调用系统打电话发短信接口以及程序内发短信
在本篇博客开头呢,先说一下写本篇的博客的原因吧.目前在做一个小项目,要用到在本应用程序内发验证码给其他用户,怎么在应用内发送短信的具体细节想不大起来了,于是就百度了一下,发现也有关于这方面的博客,点进 ...
- Oracle函数之LISTAGG
最近在学习的过程中,发现一个挺有意思的函数,它可实现对列值的拼接.下面我们来看看其具体用法. 用法: 对其作用,官方文档的解释如下: For a specified measure, LISTAGG ...
- 【记录】ASP.NET MVC MapRoute .htm 不起作用
RegisterRoutes 注册路由示例配置: public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRo ...
- 构建自己的PHP框架--构建缓存组件(1)
作为一个框架,我们还没有相应的缓存组件,下面我们就来构建我们的缓存组件. 先来定义一下接口,在 src 文件夹下创建 cache 文件夹,在cache文件夹下创建 CacheInterface.php ...
- Anliven - 基础知识梳理汇总 - 软件测试
基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...
- MySQL PXC构建一个新节点只需IST传输的方法
需求场景:原有的pxc环境数据量已经比较大,新买的服务器要加入此集群中,如何让其用IST的方式传输,而不是SST. PXC传输数据有两种方式: IST: Incremental State Trans ...
- 公司的一个面试题：如何用css让一个容器水平垂直居中？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【C#公共帮助类】DateTimeHelper设置电脑本地时间，实际开发很需要
关于本文档的说明 本文档主要为了解决实际开发当中,服务器和客户端电脑时间不能相等的问题,纯干货,实际项目这种时间不同步的情况很多很多,时间不相等,到时候把本地的数据提交给服务器,服务器看实际上传时间和 ...