<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
#list
{
}
.subMenu
{
/* margin:0 auto; */
margin-top:10px;
text-align: center;
border: 2px solid #a1a1a1;
background: #dddddd;
width: 120px;
border-radius: 6px;
-moz-border-radius: 25px; /* 老的 Firefox */
}
.subMenuContent
{
text-align: center;
border: 2px solid #a1a1a1;
background-color:Yellow;
width: 120px;
border-radius: 5px;
display:none;
}
</style>
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
<script>
$(function () {
//------自定义数据-------
var removeLengh = 60; //滑动距离大于此数--删除
var originX = 0; //物体起点横坐标
//-----------------------
var startX; //触摸起始横坐标
var startObject; //首次触摸的物体（作为控制物体）
var moveSpave; //移动的距离
//-------监听触屏事件---------
$("#list .menu .subMenu").on("touchstart touchmove touchend touchcancel", function (e) {
e.preventDefault(); //该区域禁止滑动切换页面
if (e.originalEvent.type == "touchstart") {
startX = e.originalEvent.touches[0].pageX; //触摸起始位置赋值
startObject = $(this); //控制物体赋值
}
else if (e.originalEvent.type == "touchmove") {
var moveX = e.originalEvent.touches[0].pageX;
moveSpave = moveX - startX;
startObject.css({ marginLeft: moveSpave });
if (moveSpave > -1 * removeLengh || moveSpave < removeLengh) {
startObject.css({ opacity: 1 - moveSpave / removeLengh }); //渐变透明
}
}
else if (e.originalEvent.type == "touchend") {
if (Math.abs(moveSpave) > removeLengh && startObject.next().is(":hidden")) {
startObject.remove();
}
else {
if (startObject.next().is(":hidden")) {
startObject.next().show(500);
}
else {
startObject.next().hide(500);
}
startObject.animate({ marginLeft: originX + 'px' }); //不删除，移动回原点
startObject.css({ opacity: 1 });
}
}
});
});
</script>
</head>
<body>
<div id="list">
<div class="menu">
<div class="subMenu">
<p>菜单一</p>
</div>
<div class="subMenuContent">
<p>子菜单1</p>
<p>子菜单2</p>
</div>
</div>
<div class="menu">
<div class="subMenu">
<p>菜单二</p>
</div>
<div class="subMenuContent">
<p>子菜单1</p>
</div>
</div>
<div class="menu">
<div class="subMenu">
<p>菜单三</p>
</div>
<div class="subMenuContent">
<p>子菜单1</p>
<p>子菜单2</p>
<p>子菜单3</p>
</div>
</div>
</div>
</body>
</html>
- 1
- 2
前往页