怎么用js实现类似手机切屏的左右滑动的效果

Posted 2023-05-13

好比方说一个html里面有3个div，每个div都可以像手机切屏一样滑动（用来显示隐藏的图标），不是整个页面滑动，比方说div1滑动了，div2 div3都保持不动

参考技术A

这是自己封装的原生js方法，为了偷懒，用了电jqurey。调用方法如下：

touchs._left(object);//往左滑动，

touchs._right(object);//往右滑动

touchs._top(object);//往上滑动

touchs._bottom(object);//往下滑动

说明：object的取值可以是一个id("#id")表达式，或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等，只要可以用jqurey通过这个表达式获取到dom对象，这个表达式怎么写都可以。

参考技术B 捕捉 touch事件
找个 JS关于touch事情看看就明白了！！ 参考技术C http://www.idangero.us/sliders/swiper/demos.php

这里有，基于 jQuery 参考技术D appframework插件试试，应该有类似效果~~ 第5个回答  2014-08-08 怎么滑动？是拖动吗？还是怎么样？

【求助】SlidingMenu 左右滑动菜单与viewpage冲突问题

使用SlidingMenu 开源的包实现了左侧滑动菜单的功能，结合ViewPage完成了效果。viewPage 滑动到第一页的时候再滑动就会出现左侧的菜单。现在需要ViewPage滑动到最后一页从右侧出现另一个SlidingMenu菜单。mSlidingMenuRight.setSecondaryMenu(R.layout.fragment_r_menu); getSupportFragmentManager().beginTransaction() .replace(R.id.menu_r, new RightMenuFragment()).commit();使用这个方法添加了 右侧的菜单，但是现在Viewpage 里面的没法滑了 一旦左滑就出现了左侧的菜单。右滑就出现了右侧的菜单。冲突了。 求助解决方法》》》》》》》》》

参考技术A 文档我下载看了。实现的很不错，就是中间的title 无法固定。他自己定义的Menu还是局限性比较大。 但是这个的确是个很好的解决方法。谢谢了 查看原帖>>

麻烦采纳，谢谢!本回答被提问者采纳