使用touch事件实现手机网页右侧菜单栏拖动显示隐藏

最新推荐文章于 2020-08-11 22:00:08 发布

mozart-ye

最新推荐文章于 2020-08-11 22:00:08 发布

阅读量743

点赞数

分类专栏：前端文章标签：手机 webapp 前端 touch 左右侧菜单

本文链接：https://blog.csdn.net/yeyu2012yeyu2012/article/details/46583575

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

呵呵，第一次写博客...以前有问题有bug总喜欢搜别人的demo和解决方法，现在搞了那么久前端，还觉得有一点点小经验，今天也来分享一个手机webapp上实用的dome——使用touch事件实现手机网页右侧菜单栏拖动显示隐藏。

先贴代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>使用touch事件实现手机网页右侧菜单栏拖动显示隐藏</title>
</head>
<style>
html,body{
margin: 0;
}

.page{
width: 100%;
overflow: hidden;
position: relative;
}

.container{
width: 100%;
height: 100%;
}

.sidebar{position: fixed;top: 0px;right: -180px;width:180px;height: 100%;background: #999;color: #fff;}

.content{width: 100%; height: 2000px;}
</style>
<body>
<div class="page">
<div class="container">
<div class="sidebar">菜单栏</div>
<div class="content">(=^ ^=)夜猫子</div>
</div>

</div>

<script src="js/zepto.js"></script>
<script>
var sx,sy,moveEndX,moveEndY;
var isMoveX = false;
$('.container').on("touchstart",function(e){

//记录原始触点
sx=e.touches[0].pageX;
sy=e.touches[0].pageY;
});

$('.container').on("touchmove",function(e){
moveEndX = e.touches[0].pageX;
moveEndY = e.touches[0].pageY;
var X = Math.abs(moveEndX - sx);
var Y = Math.abs(moveEndY - sy);

//判断是上下拖动还是左右拖动
if ( X > Y ) {
e.preventDefault();
isMoveX = true;
}else{
isMoveX = false;
}
});

$('.container').on("touchend",function(e){
if(isMoveX ){
if((moveEndX-sx)<0){
$(".container").animate({"-webkit-transform":"translate3d(-180px, 0px, 0px)"},300,"easeing");
}else{
$(".container").animate({"-webkit-transform":"translate3d(0px, 0px, 0px)"},300,"easeing");
}
}