22web app实现左右滑动统制菜单

22web app实现左右滑动控制菜单

模仿相册app tidy做个html5的web app,完全不考虑桌面版本,所以ie什么的不要测试,需要模拟器测试。

因为找不到合适的js插件,最后就自己写了代码。

//希望有这方面资料的同学,一起交流分享下^_^

PS:该demo使用了jquery 2.0版本的插件(其他版本也行,这个不支持ie,比较小)。我们队里另一个同学可以不使用js插件实现效果,但是我们对dom机制等不怎么了解,在不使用jquery的情况下,控制起来会很麻烦。

功能,有三个菜单项

22web app实现左右滑动统制菜单

可以左右拖动,向远离拖动点拖动的时候,该菜单会渐变透明。

22web app实现左右滑动统制菜单

当在一定范围内松开手指,菜单会自动返回起点。

点击菜单,会自动弹出子菜单

22web app实现左右滑动统制菜单

里面还有部分逻辑没在这里说明,并且还是存在许多Bug没处理的。

关键代码如下

//注册、监听触屏事件
$("#list .menu .subMenu").on("touchstart touchmove touchend touchcancel", function (e) {
                e.preventDefault(); //该区域禁止滑动切换页面
           //判断控制。实现效果代码
});


 

demo下载地址:http://download.csdn.net/detail/wowkk/7128449 没有积分的同学可以在这里留下邮箱。