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= ...
随机推荐
- 我的iOS开发系列博文
之前目录性的总结了发表过的关于OC方面的文章,今天在目录性的总结一下有关iOS开发的文章.走过路过不要错过哦,今天的博文也全都是干货.写技术博客与大家交流一下思想也是不错的. 下面是我的技术博客中有关 ...
- iOS开发之各种动画各种页面切面效果
因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其 ...
- [Python] python vs cplusplus
一些学习过程中的总结的两种语言的小对比,帮助理解OO programming. Continue... 字典 序列 --> 字典 Python: def get_counts(sequence) ...
- android view 中各函数的执行顺数
这个就好像是 activity 的生命周期一样,如果我们要使用自定义的 view,那么就很有必要了解一下 view 的那些能够被重写的函数的执行顺序.废话不多讲,以常用的5个函数为例子,见下文: pa ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- HTML基本结构
HTML简介 HyperText Markup Language:超文本标记语言 HyperText:超文本(文本 + 图片 + 视频 + 音频 + 链接) Markup Language:标记语言 ...
- jQuery-1.9.1源码分析系列（十六）ajax——ajax框架
ajax的介绍就不多说了,点击可看. 既然是ajax框架,那么闲谈一谈jQuery的ajax处理思路. 现在的浏览器都支持ajax,只不过不同的浏览器使用方法可能有不同(IE使用new window. ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 记安装EP时在指定BCP账户信息时提示AOS无法访问的解决方法
因为卡在这个问题上好久,外加同事也有遇到,因此记下来! 环境:Windows Server 2012 R2 Standard + Dynamics AX 2012 R2 + SharePoint 20 ...
- 修改MySQL自动递增值
alter table tablename auto_increment=num 其中tablename为表的名称,num为要设置的新的自动递增值,此时再Insert一条数据,自动递增值即为num,不 ...