模仿相册app tidy做个html5的web app,完全不考虑桌面版本,所以ie什么的不要测试,需要模拟器测试。
因为找不到合适的js插件,最后就自己写了代码。
//希望有这方面资料的同学,一起交流分享下^_^
PS:该demo使用了jquery 2.0版本的插件(其他版本也行,这个不支持ie,比较小)。我们队里另一个同学可以不使用js插件实现效果,但是我们对dom机制等不怎么了解,在不使用jquery的情况下,控制起来会很麻烦。
功能,有三个菜单项
可以左右拖动,向远离拖动点拖动的时候,该菜单会渐变透明。
当在一定范围内松开手指,菜单会自动返回起点。
点击菜单,会自动弹出子菜单
里面还有部分逻辑没在这里说明,并且还是存在许多Bug没处理的。
关键代码如下
//注册、监听触屏事件
$("#list .menu .subMenu").on("touchstart touchmove touchend touchcancel", function (e) {
e.preventDefault(); //该区域禁止滑动切换页面
//判断控制。实现效果代码
});
demo下载地址:
http://download.csdn.net/detail/wowkk/7128449 没有积分的同学可以在这里留下邮箱。