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= ...
随机推荐
- C算法编程题（七）购物
前言 上一篇<C算法编程题(六)串的处理> 有些朋友看过我写的这个算法编程题系列,都说你写的不是什么算法,也不是什么C++,大家也给我提出用一些C++特性去实现问题更方便些,在这里谢谢大家 ...
- Oracle软件安装目录满的清理方法
这是Oracle数据库日常运维中很常见的一个场景,安装目录满有时不光会导致无法记录最新数据库的日志信息,导致遇到问题无法查到最新的日志信息,还会引发一些奇怪的问题. 所以日常巡检要保证Oracle的安 ...
- struts2学习笔记--struts.xml配置文件详解
这一节主要讲解struts2里面的struts.xml的常用标签及作用: 解决乱码问题 <constant name="struts.i18n.encoding" value ...
- 探秘Tomcat——连接器和容器的优雅启动
前言: 上篇<探秘Tomcat——启动篇>粗线条的介绍了在tomcat在启动过程中如何初始化Bootstrap类,加载并执行server,从而启动整个tomcat服务,一直到我们看到控制台 ...
- composer安装yii2问题总结
今天周六,在家安装yii2的advanced版本, 过程有些坎坷, 不过最后总算安装好了. 总结一下, 主要遇到下面两个问题: 1, 下载速度慢, 主要原因是网络问题 下载yii2时, 模板(除了ve ...
- IO多路复用之select总结
1.基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程.IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口),必须使用I/ ...
- 原生AJAX入门讲解（含实例）
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- C#基础-邮件发送
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- jquery实现表格动态添加
//点击追加触发$(function(){$("#button").click(function(){var div_ = $("#sel").val();va ...
- MongoDB索引
1.目的 索引就是用来加速查询的.数据库索引与书籍的索引类似:有了索引就不需要翻遍整本书,数据库则可以直接在索引中查找,使得查找速度能提高几个数量级.在索引中找到条目以后,就可以直接跳转到目标文档的位 ...