webapp实现左右滑动控制菜单资源-CSDN文库

共2个文件

js：1个

htm：1个

5星 · 超过95%的资源需积分: 34 74 浏览量 2014-04-01 09:59:18 上传评论 1 收藏 29KB RAR 举报

标题中的“web app实现左右滑动控制菜单”指的是在Web应用程序中，通过用户左右滑动手势来切换或显示隐藏的侧边菜单。这种交互设计常见于移动设备上的Web应用，尤其是那些模仿原生应用体验的网页应用。实现这一功能通常会涉及到HTML5的新特性，比如触摸事件（touch events）和CSS3动画。描述中提到，这个实现过程花费了两天时间，说明可能涉及到较为复杂的代码逻辑和优化工作。开发者还分享了他在CSDN博客上的文章链接，供没有积分的读者获取更多信息，这表明他愿意与社区共享自己的学习成果和技术经验。标签“web app”指的是基于Web技术构建的，能在移动设备或桌面浏览器上运行的应用程序。它们通常利用HTML、CSS和JavaScript等前端技术栈，有时也会借助于Web服务接口来提供更丰富的功能。另一个标签“html5”则指代新一代的HTML标准，它引入了许多新元素、API和特性，如离线存储、媒体元素、canvas画布、svg矢量图、geolocation定位以及我们在此情境中特别关注的触摸事件。HTML5的这些新特性使得Web应用能更好地适应移动设备，并提供更加丰富的用户体验。在压缩包子文件的文件名称列表中，"demo.htm"很可能是实现左右滑动控制菜单的示例页面，展示了一个工作中的例子，用户可以通过查看源代码来学习具体实现。而"Scripts"目录可能包含了所有必要的JavaScript脚本，用于处理触摸事件、计算滑动距离、显示或隐藏菜单等核心逻辑。实现左右滑动控制菜单通常会包括以下步骤： 1. 创建HTML结构：设置一个包含主内容区域和侧边菜单的容器，通过CSS定位使菜单默认隐藏或显示。 2. 监听触摸事件：使用HTML5的`touchstart`、`touchmove`和`touchend`事件，捕捉用户的滑动操作。 3. 计算滑动距离：在`touchmove`事件中记录触点的初始位置和结束位置，计算出滑动的距离。 4. 判断滑动方向：根据滑动距离判断用户是向左还是向右滑动。 5. 触发菜单动作：如果滑动达到一定阈值，就显示或隐藏侧边菜单，可以使用CSS3的`transform`属性实现平滑过渡效果。 6. 添加防止默认滚动行为：防止页面在滑动时滚动，确保只执行菜单切换操作。 7. 兼容性处理：考虑到不是所有设备都支持触摸事件，可能需要添加鼠标事件作为备用方案，或者使用像Hammer.js这样的库来处理跨平台的触摸事件。通过以上步骤，我们可以构建一个响应用户手势、交互流畅的Web应用侧边菜单。这不仅提升了用户体验，也展示了HTML5和JavaScript在现代Web开发中的强大能力。

资源推荐

资源详情

资源评论

收起资源包目录

web app实现左右滑动控制菜单.rar （2个子文件）

Scripts

jquery-2.0.3.min.js 82KB

demo.htm 4KB

<!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>

评论收藏

内容反馈