新项目是webApp 有一个滑动折叠菜单的效果
一开始向左滑呼出菜单,右滑隐藏,
但由于事件被我加在整个content上 所以机器默认的上下滑动拖拽屏幕就无法执行了,
而我整个页面又是很长的,所以目前把滑动事件加在菜单上,只能执行右滑折叠菜单。
肯定有更好的方法,但是目前项目赶进度,就先这样吧。
//展示菜单栏函数
function showMenu (argument) {
$('.content').animate({'left':menuWidth}, {
duration: 200,
queue: false,
progress:function() {
$('.header').css('left',menuWidth);
$('.newFrontPage-menu').css({
right: '0',
display:'block'
});
}
});
}
//收起菜单栏函数
function hideMenu (argument) {
$('.content').animate({'left':'0'}, {
duration: 200,
queue: false,
progress:function() {
$('.header').css('left','0');
$('.newFrontPage-menu').css({
right: '-100%',
display:'none'
});
}
});
}
//点击触发菜单栏折叠
$('.header-menu').click(function() {
if($('.newFrontPage-menu').css('display') == 'block'){
hideMenu();
}else{
showMenu();
}
});
var lgszys =false;
//触摸事件
function touchStart(ev){
try{
sX = ev.touches[0].pageX; //获取第一X个坐标
sY = ev.touches[0].pageY; //获取第一Y个坐标
if(ev.touches.length > 1){ //判断多触摸
lgszys = false;
}else{
lgszys = true;
}
}catch(ev){
//alert('touchEnd:'+ev.message)
}
}
//滑动事件
function touchMove(ev){
try{
ev.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动
if(lgszys == true){
var touches = ev.touches[0]; //获取第一个触点
eX = touches.pageX; //页面触点X坐标
eY = touches.pageY; //页面触点Y坐标
var enX = sX - eX;
var enY = sY - eY;
if(Math.abs(enX) > Math.abs(enY) && Math.abs(enY) > 2){ //左右事件
//确保一个触摸不捏刷
if ( ev.touches.length > 1 || ev.scale && ev.scale !== 1) return //多触摸判断,当前为一根手指以触发事件,由于JS对手指个数触摸屏幕判断没有非常精确,当两手指触摸距离很接近时,会被处理为一根手指,还有可能会触发touchEnd事件
ydxs = sX - eX;
}
}
}catch(ev){
//alert('touchMove:'+ev.message)
}
}
//离开事件
function touchEnd(ev){
try{
if(lgszys == true){ //多个手指触摸判断
if(ydxs > 0 && ydxs > 50){ //左滑动(滑动超过50才执行)
showMenu();
}else if(ydxs < 0 && ydxs < -50){ //右滑动(滑动超过50才执行)
hideMenu();
}
}
}catch(ev){
//alert('touchEnd:'+ev.message)
}
}
//手指事件
document.getElementById('content-mod').addEventListener('touchstart',touchStart,false);//接触
document.getElementById('content-mod').addEventListener('touchmove',touchMove,false); //滑动
document.getElementById('content-mod').addEventListener('touchend',touchEnd,false);