1
2
3
4
|
touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 |
在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新 的meego系统都模拟了类似的对象,这里只针对iOS,因为我只有iPad可用于测试。。)。这个对象封装一次 屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以通过touch event handler的event对象取到 (一般是通过event.changedTouches属性)。这个对象包括一些重要的属性:
1
2
3
4
|
client / clientY: // 触摸点相对于浏览器窗口viewport的位置 pageX / pageY: // 触摸点相对于页面的位置 screenX /screenY: // 触摸点相对于屏幕的位置 identifier: // touch对象的unique ID |
HTML主体定义
1
2
3
|
<body style=”height: 100%;margin:0;padding:0”> <div id=”canvas” style=”position: relative;width:100%;height: 100%;”></div> </body> |
实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile Event</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<style>
*{margin:0; padding:0;}
html,body{overflow:hidden;}
.rootContainer{width:100%; overflow:hidden;}
.baseWrap{width:100%;}
.base-con{width:100%; float:left;}
.bg1{background-color:#333;}
.bg2{background-color:#666;}
.bg3{background-color:#999;}
.slideBtn{padding-top:20px; text-align:center;}
.slideBtn li{width:10px; height:10px; display:inline-block; margin-right:10px; border-radius:5px; background-color:#F90;}
.slideBtn li.current{background-color:#06F;}
</style>
<script src="http://style.cggol.com/js/jquery.min.js"></script>
</head>
<body>
<div class="rootContainer" id="rootContainer">
<div class="baseWrap">
<div class="base-con bg1"></div>
<div class="base-con bg2"></div>
<div class="base-con bg3"></div>
</div>
</div>
<ul class="slideBtn">
<li class="current"></li>
<li></li>
<li></li>
</ul>
<script>
$(document).ready(function(){
//初始大小
initContainer();
$(window).resize(function(){
initContainer();
});
function initContainer(){
var winWidth=$(window).width();
var rootContainer=$(".rootContainer");
var baseWrap=$(".baseWrap");
var conList=$(".base-con");
var conLen=conList.length;
rootContainer.css("width",winWidth);
baseWrap.css("width",winWidth*conLen);
conList.css("width",winWidth);
conList.css("height","150px");
}
});
$(document).ready(function(){
//参数
var winWidth=$(window).width();
var rootContainer=$(".rootContainer");
var baseWrap=$(".baseWrap");
var conList=$(".base-con");
var slideBtn=$(".slideBtn");
var conLen=conList.length;
var index=0;
var startX,startY;
var distance,maxDistance=50;
var animateSpeed=500,recoverSpeed=100;
var $t;
var IntervalTime=8000;
$t=setInterval(function(){leftSlide()},IntervalTime);
var startX,startY,endX,endY;
var m = Math,
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
hasTouch = 'ontouchstart' in window && !isTouchPad,
START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup',
CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup';
var mdiv=document.getElementById("rootContainer");
mdiv.addEventListener(MOVE_EV, function (e) {
clearInterval($t);
}, false);
mdiv.addEventListener(START_EV, function (e) {
clearInterval($t);
var point = hasTouch ? e.touches[0] : e;
startX=point.pageX;
}, false);
mdiv.addEventListener(END_EV, function (e) {
var point = hasTouch ? e.changedTouches[0] : e;
endX=point.pageX;
mm();
$t=setInterval(function(){leftSlide()},IntervalTime);
}, false);
function mm(){
if(startX-endX>0){
leftSlide();
}else{
rightSlide();
}
}
/*
rootContainer.mousedown(function(event){
startX=event.screenX;
startY=event.screenY;
$(this).bind("mousemove",function(event){
//清除滚动
clearInterval($t);
distance=event.screenX-startX;
//向右滑 ->
if(event.screenX-startX>maxDistance){
rootContainer.unbind("mousemove");
rightSlide();
}
//向左滑 <-
if(event.screenX-startX<-maxDistance){
rootContainer.unbind("mousemove");
leftSlide();
}
});
});
rootContainer.mouseup(function(){
$(this).unbind("mousemove");
$t=setInterval(function(){leftSlide()},IntervalTime);
});
*/
//左滚动
function leftSlide(){
index++;
if(index>conLen-1) index=0;
slideBtn.find("li").eq(index).addClass("current").siblings().removeClass("current");
baseWrap.animate({marginLeft:-winWidth},animateSpeed,function(){
baseWrap.children("div:first").appendTo(baseWrap);
$(this).css("margin-left",0);
});
}
//右滚动
function rightSlide(){
index--;
if(index<0) index=conLen-1;
slideBtn.find("li").eq(index).addClass("current").siblings().removeClass("current");
baseWrap.children("div:last").prependTo(baseWrap);
baseWrap.css("margin-left",-winWidth);
baseWrap.animate({marginLeft:0+"px"},animateSpeed,function(){});
}
});
</script>
</body>
</html>
上一篇:浅析OnKeyPress事件和OnKeyDown/OnKeyUp事件
讨论数量:0