移动端可拖动导航菜单小demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>移动端滑动导航菜单</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
/*nav*/
.m-nav{
position: relative;
height:3rem;
}
.frame{margin: 0 10px; height:100%; padding-right:50px;background-color: #00a0e9}
.nav-box{
position: relative;
height:100%;
overflow: hidden;
}
.m-nav ul{
position: relative;
left:0;
margin: 0.5rem;padding: 0;
list-style: none;
width:9999px;
height:100%;
}
.m-nav li{
float:left;
margin:0;
padding-right: 10px;
}
.m-nav li a{
text-decoration: none;
color:#000;
display: inline-block;
}
.menu-btn{
position: absolute;
top:0px;
right:10px;
width:40px;
float:left;
margin-left: 2%;
display:block;
height: 3rem;
text-align: center;
background-color:red;
}
</style>
</head>
<body>
<!--菜单-->
<div class="m-nav">
<div class="frame">
<div class="nav-box" id="nav-box">
<ul class="nav-list" id="nav-list">
<li><a href="" class="list-item">111一级建造师</a></li>
<li><a href="" class="list-item">222一级建造师</a></li>
<li><a href="" class="list-item">333一级建造师</a></li>
<li><a href="" class="list-item">444一级建</a></li>
<li><a href="" class="list-item">5555一级建造师</a></li>
<li><a href="" class="list-item">6666一级建造师</a></li>
<li><a href="" class="list-item">7777一级建造师</a></li>
<li><a href="" class="list-item">8888一级建造师</a></li>
<li><a href="" class="list-item">9999一级建造师</a></li>
<li><a href="" class="list-item">100000建造师</a></li>
</ul>
</div>
<a href="javascript:void(0);" class="menu-btn" id="menu-btn" ></a>
</div>
</div> <script>
window.onload = function(){
var isdrag = false;//是否允许再拖动
var leftDis,curPage;//ul的left值,当前拖动开始时坐标
var list = document.getElementById("nav-list");
var finalLeft;//拖动结束时ul的left
var liPadding = 10;//li的间距
var items = document.getElementsByClassName("list-item");//li内a标签集合
var totalWidth = 0;//ul的实际宽度
var navBox = document.getElementById("nav-box");//ul外div
var boxWidth;
var isShow = false; //获取ul外div的宽度
boxWidth = parseInt(window.getComputedStyle(navBox,null).width); //计算ul的实际宽度
for(var i = 0;i<items.length;i++){
totalWidth += parseInt(window.getComputedStyle(items[i],null).width);
}
totalWidth = totalWidth+items.length*liPadding; //设置ul的宽度值,否则li将会换行
list.style.width = totalWidth+10+'px'; //绑定事件
list.addEventListener('touchstart',startMouse);
list.addEventListener('touchmove',moveMouse);
list.addEventListener('touchend',function(){
isdrag = false;
}); function startMouse(e){
isdrag = true;
leftDis = parseInt(list.style.left+0);//ul的left值
curPage = e.touches[0].pageX;//手指触摸开始时的坐标
return false;
}
function moveMouse(e){
if (isdrag){
finalLeft = leftDis + e.touches[0].pageX - curPage;//触摸结束时ul的left值
console.log(finalLeft);
if(finalLeft<=-(totalWidth-boxWidth)||finalLeft>=0){//滑到最末一页时
return false;
}
else{
list.style.left = finalLeft +'px';
}
}
} //点击菜单按钮显示全部
var menuBtn = document.getElementById("menu-btn");
menuBtn.onclick = function(){
if(!isShow){
list.removeEventListener('touchstart',startMouse);
list.removeEventListener('touchmove',moveMouse);
list.style.width = boxWidth+'px';
list.style.left = '0px';
navBox.style.overflow = 'visible';
navBox.style.height = 'auto';
isShow = true;
} else{
list.addEventListener('touchstart',startMouse);
list.addEventListener('touchmove',moveMouse);
list.style.width = totalWidth+10+'px';
navBox.style.overflow = 'hidden';
navBox.style.height = '100%';
isShow = false;
}
}
}; </script>
</body>
</html>
放在手机上,滑动快了会有抖动,还不知道什么原因
移动端可拖动导航菜单小demo的更多相关文章
- 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Javascript导航菜单13则
来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利 ...
- swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
- 固定底部导航菜单-续集（BottomMenu-移动端V3.0）
固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...
- jquery小效果：新浪游戏右侧导航菜单 （页面效果）
偷盗:新浪游戏右侧导航菜单 http://games.sina.com.cn 效果: 随着页面的滚动,左侧页面的内容,和右侧的导航菜单的按钮文字对应: 点击右侧的导航按钮,左侧页面滚动到相应的内容 2 ...
- 移动端页面弹幕小Demo实例说明
代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果 写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题 问题说明: D ...
- Flexible实现H5移动端适配小demo
前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘fl ...
- jQuery/CSS3类似阿里巴巴的商品导航菜单实现教程
有两天没发表文章了,今天来说说利用jQuery和CSS3制作一款类似阿里巴巴左侧商品菜单导航,这款菜单看起来非常大气,可以展示非常多的产品类目,如果你在设计电子商务网站,不妨可以拿来参考,一下是效果图 ...
- Netsharp快速入门(之6) 基础档案(创建导航菜单)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 1.1 创建导航菜单 1.在Demo节点下,录入路径名称,并在下方录入两个导航页签名 2.建立分类,只要填路径名 3.双击基 ...
随机推荐
- 【UML】时序图Sequence diagram（交互图）（转）
前言 UML时序图是UML动态图之一,它是强调时间顺序的交互图. 定义 时序图是显示按时间顺序排列的对象之间交互的图. 组成元素 对象 包括三种命名 ...
- Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] B "Or" Game （贪心）
首先应该保证二进制最高位尽量高,而位数最高的数乘x以后位数任然是最高的,所以一定一个数是连续k次乘x. 当出现多个最高位的相同的数就枚举一下,先预处理一下前缀后缀即可. #include<bit ...
- 什么样子的WordPress网站更受搜索引擎欢迎
网站的导航功能对于搜索引擎而言是非常重要的 网站的导航功能对于帮助用户迅速找到他们想要的内容来说是很重要的.它对帮助搜索引擎理解该网站有哪些重要内容同样非常重要.虽然百度的搜索结果都是指向每一个特定的 ...
- selenium--iframe
前戏 很多人在用selenium定位页面元素的时候会遇到定位不到的问题,明明元素就在那儿,用firebug也可以看到,就是定位不到,这种情况很有可能是frame在搞鬼. 进入到iframe <h ...
- 关于SpringMVC注解
1.@RequestMapping RequestMapping是一个用来处理请求地址映射的注解(将请求映射到对应的控制器方法中),可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址 ...
- drawRect - 谈画图功能的内存优化
作者介绍 作者:毕洪博 ( @毕洪博 ),iOS 开发者,pop Art 追随者.现在正在鼓捣 AVFoundation,博客 bihongbo.com, 欢迎大家找我讨论技术. 作者已将本文在微信公 ...
- NOIP模拟赛 经营与开发 小奇挖矿
[题目描述] 4X概念体系,是指在PC战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以“EX”为开头的英语单词. eXplore(探索) eXpand(拓张与发展) eXploit(经营与开发 ...
- Protobuf有没有比JSON快5倍？用代码来击破pb性能神话
转 http://www.sohu.com/a/136487507_505779 2017-04-26 07:58 程序设计 /58 /技术 导读:Google 的 Protocol Buffers ...
- pandas删除及其映射修改操作。
1.使用drop_duplicates()函数删除重复的行 df.drop_duplicates() 2.映射 映射的含义,创建一个映射关系,把values元素和一个特定的标签或字符串绑定 map = ...
- DeepFaceLab: SSE，AVX, OpenCL 等版本说明！
Deep Fake Lab早期只有两个版本,一个是专门正对NVIDIA显卡的CUDA9的版本,另一个是支持CPU的版本. 三月初该项目作者对tenserFlow,Cuda的版本进行了升级,预编译的软件 ...