touchmove滑动菜单

首先我们先把基础样式做出来

 <style type="text/css">*{padding: 0;margin:0; }.container{width: 100%;height: 200px;position: relative;overflow: hidden;}.ulbox{width: 120%;height: 100%;position: absolute;left: 0;top:0;overflow: hidden;}.ulbox li{box-sizing: border-box;text-align: center;line-height: 200px;font-size: 2rem;      list-style: none;float: left; width: 20%; height:100% ;background-color: rgba(123,215,196,0.5);border-left: white 0.2rem solid;}</style>
</head>
<body><div class="container"><ul class="ulbox"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div>
</body>

主容器的·overflow: hidden;很重要不然就会导致如下图的结果

重点是js的代码
首先获取ul的class，以及设置一个初始化的起始点和偏移距离，

 var ulbox = document.getElementsByClassName("ulbox")[0];var startX = 0;var leftX = 0;

然后通过touchstart的event的.changedTouches[0]的clientX，获取鼠标点下去x轴初始值；

在通过touchmove的.changedTouches[0]的clientX，实时获取x轴的值；
再让其相减得出偏移值；
让后为了防止，偏移量超出ul的宽度，所以

 if (leftX > 0) {leftX = 0;}if (leftX < -200) {leftX = -200;}

让其值超出界限时，变为临界值。

附上原代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>dmeo</title><style type="text/css">*{padding: 0;margin:0; }.container{width: 100%;height: 200px;position: relative;overflow: hidden;}.ulbox{width: 120%;height: 100%;position: absolute;left: 0;top:0;overflow: hidden;}.ulbox li{box-sizing: border-box;text-align: center;line-height: 200px;font-size: 2rem;      list-style: none;float: left; width: 20%; height:100% ;background-color: rgba(123,215,196,0.5);border-left: white 0.2rem solid;}</style>
</head>
<body><div class="container"><ul class="ulbox"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script type="text/javascript">var ulbox = document.getElementsByClassName("ulbox")[0];var startX = 0;var leftX = 0;ulbox.addEventListener("touchstart",function(e){console.log(e)startX =  e.changedTouches[0].clientX;})ulbox.addEventListener("touchmove",function(e){leftX = e.changedTouches[0].clientX - startX;if (leftX > 0) {leftX = 0;}if (leftX < -200) {leftX = -200;}console.log(leftX)ulbox.style.left = ""+ leftX +"px"})</script>
</body>
</html>

touchmove滑动菜单相关推荐

cocos2D中实现滑动菜单CCScrollView＋CCMenu效果，（注意不是cocos2D－x）！！
本来想着用ScrollView+Menu可以很容易实现类似Angry Bird,滑动菜单选择关卡的效果.结果悲剧了,cocos2D没有CCScrollView,没办法...自己实现了一个. 成员变量: ...
android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu[转]
http://blog.csdn.net/jj120522/article/details/8095852 示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这 ...
Android双向滑动菜单完全解析，教你如何一分钟实现双向滑动特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9671609 记得在很早之前,我写了一篇关于Android滑动菜单的文章,其中有一个 ...
html5手机端的点击弹出侧边滑动菜单代码
效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...
超酷的Android 侧滑(双向滑动菜单)效果
Java代码下面看看我们如何使用它,达到我们想要的效果 public class MainActivity extends Activity { /** * 双向滑动菜单布局 */ privat ...
实现滑动菜单（富文本版本）
所谓的滑动菜单就是将一些菜单选项隐藏起来,而不是放置在主屏幕上,然后可以通过滑动的方式将菜单显示出来.这种方式既节省了屏幕空间,又实现了非常好的动画效果. 下面我们实现一个相对基本的滑动菜单. 参考文 ...
Android UI（三）SlidingMenu实现滑动菜单（详细官方）
Jeff Lee blog: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...
html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
Javascript实现的左右滑动菜单
原文链接:http://www.cnblogs.com/miqi2214/archive/2009/04/28/1445308.html Javascript实现的左右滑动菜单先看Demo便于理解: ...

touchmove滑动菜单

touchmove滑动菜单相关推荐

最新文章

热门文章