手机端触屏手指滑动方向
工作中写过的一个功能
<!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: {
currntY: 0,
lastY: 0,
direction: "no",
start: function() {
var self = this,
obj = self._object;
obj.addEventListener('touchstart', function(e) {
self.move();
}, false);
obj.addEventListener('touchend', function(e) {
self.move();
lastY = document.body.scrollTop || document.documentElement.scrollTop;
}, false);
},
//拖动滑动时
move: function() {
var self = this;
if(lastY='defined'){
var lastY=document.body.scrollTop || document.documentElement.scrollTop;
}
self._object.addEventListener('touchmove', function(e) {
currntY = document.body.scrollTop || document.documentElement.scrollTop;
var direction = currntY - lastY;
if (direction > 0) {
self._direction = "down";
} else {
self._direction = "up";
}
if(currntY == 0){
self._direction = "top";
} else if((currntY + window.screen.availHeight) == document.body.clientHeight){
self._direction = "bottom";
}
document.getElementById('nav').innerHTML= self._direction;
//document.getElementById('nav').innerHTML= currntY + "|" + window.screen.availHeight + "|" + document.body.clientHeight;
}, false);
},
//通过一个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("inner");
}
</script>
<style>
* {margin: 0; padding: 0;}
#outer{ width:90%; height: 100%; background: #000; margin: auto; overflow: hidden;}
#inner{width:80%; background: #e4e4e4; margin: auto; position:relative; top:0px; font-size: 1em; padding: 30px 10px; }
#inner p{line-height: 30px; letter-spacing: 3px; text-indent:2em;}
#nav { width:100%; height: 50px; border: 1px solid #D4CD49; text-align: center; position:fixed;left:0;top:30% }
h2{ width: 100%; text-align: center; }
h3{ width: 100%; padding-left:60%;}
</style>
</head>
<body>
<div id="spText2"></div>
<div id="outer">
<div id="inner">
<h2>背影</h2>
<h3>—朱自清</h3>
<p>这里是中间的内容</p>
<div id="nav" style="color:#F00; font-size:35px"></div>
</div>
</div>
</body>
</html>版权声明：本文由Web学习之路发布，如需转载请注明出处。
