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开发之SQLite--C语言接口规范(三)——Binding Values To Prepared Statements
在前面的博客中已经介绍了如何连接SQLite数据库,并且简单的查询和遍历结果集.在前面用到了sqlite3_stmt *stmt,也就是预编译后的SQL语句.在本篇博客中会了解一下sqlite3_st ...
- Repository 返回 IQueryable？还是 IEnumerable？
这是一个很有意思的问题,我们一步一步来探讨,首先需要明确两个概念(来自 MSDN): IQueryable:提供对未指定数据类型的特定数据源的查询进行计算的功能. IEnumerable:公开枚举数, ...
- EntityFramework 如何查看执行的 SQL 代码？
在 VS 调试的时候,如果我们项目中使用的是 EntityFramework,查看 SQL 执行代码就不像 ADO.NET 那样直观了,我们需要设置下,可以参考下: How can I log the ...
- php使用post动态选择头像和js事件动态改变头像
<html> <head> <meta http-equit="Content-type" content="text/html" ...
- 学习Linux下s3c2440的USB鼠标驱动笔记
1.ARM-Linux下USB驱动程序开发1.1.1.linux下USB配置:*********(MassStorage:存储设备)********************************** ...
- C#运用ThoughtWorks生成二维码
在现在的项目中,较多的使用到二维码,前面介绍过一篇使用Gma生成二维码的操作,现在介绍一个第三方组件,主要介绍生成二维码,二维码的解析,以及对二维码的相关信息的选择,现在介绍ThoughtWorks用 ...
- MongoDB-基础-条件操作符
1.一些解释 less than : 比..少 lt greater than : 比..多 gt equals :相等 e ...
- jQuery-1.9.1源码分析系列（十五） 动画处理——外篇
a.动画兼容Tween.propHooks Tween.propHooks提供特殊情况下设置.获取css特征值的方法,结构如下 Tween.propHooks = { _default: { get: ...
- 【Win10开发】绘制静态UI
相信经历过Windows Insider的人对下面这个图都不会陌生,偶然看见邹欣老师领导的微软团队写了篇用xaml绘制这个静态页面,那咱也来亲手实验一番.唔...请做和放宽! 首先我们来看看xaml代 ...
- 【C#】分享一个可携带附加消息的增强消息框MessageBoxEx
--------------201507160917更新--------------- 无意中发现标准消息框在Windows7是有声音的,只是在Windows server 2008(R2)无声,而我 ...