js实现水平滚动菜单导航


Posted in Javascript onJuly 21, 2017

项目中用到了滚动导航,但是默认的滚动条太丑了,只好用js自己模拟了一个。凑合用可以,不算完美。希望以后有机会再来修饰一下。

先来看下最终效果:

js实现水平滚动菜单导航

最终效果

先看html结构:

<div id='root' class="root">
 <ul class="list" id="list">
 <li>全单1</li>
 <li>全部菜2单</li>
 <li>全部3单</li>
 <li>菜单4</li>
 <li>全菜单</li>
 <li>全部5菜单</li>
 <li>全6单</li>
 <li>全6部菜单</li>
 <li>全菜7单</li>
 <li>全8单</li>
 <li>全部5菜单</li>
 <li>全6单</li>
 <li>全6部菜单</li>
 <li>全菜7单</li>
 <li>全8单</li>
 <li>全9部菜单</li>
 <li>全10单</li>
 <li>全11部单</li>
 <li>菜2单</li>
 <li>全菜12单</li>
 <li>全32部菜单</li>
 </ul>
</div>

说一下,末尾我给加了阴影的效果:

.root:before{
 display: block;
 content: '';
 width: 20px;
 height:100%;
 background: rgba(111,111,111,0);
 box-shadow: 2px 2px 32px 2px #999;
 position: absolute;
 right:-20px;
 top:0;
 }

其它的样式代码:

*{
 margin: 0;
 padding:0;
 font-family: "Microsoft YaHei UI";
 }
 #root{
 height:60px;
 width: 800px;
 white-space: nowrap;
 overflow: hidden;
 -webkit-overflow-scrolling: touch;
 white-space: nowrap;
 position: relative;
 border-bottom: 1px solid #eee;
 padding-right: 20px;
 background-color: #f5f5f5;
 margin-left: 100px;
 margin-top: 50px;
 }
 .root:before{
 display: block;
 content: '';
 width: 20px;
 height:100%;
 background: rgba(111,111,111,0);
 box-shadow: 2px 2px 32px 2px #999;
 position: absolute;
 right:-20px;
 top:0;
 }
 .list{
 position: absolute;
 left:0;
 top:0;
 /*width: 100%;*/ /*不能为100%,不然宽度只有父容器的宽度,我掉进这个坑了。*/
 transition: all 1s;
 height:100%;
 line-height: 2.5;
 }
 .on{
 color:red;
 font-weight: bold;
 }
 .off{
 color: #000;
 font-weight:normal;
 }
 .list li{
 display: inline-block;
 padding:10px 20px;
 cursor: pointer;
 }

下面是js的逻辑部分:

var box = document.getElementById('root'); //外面的容器。
 var listBox = document.getElementById('list'); //ul列表。主要是移动它的left值
 var list = document.getElementsByTagName('li');//所有列表元素
 var width = box.clientWidth /2; //为了判断是左滑还是右滑
 var totalWidth = 0; 
 for(let i=0;i<list.length;i++){
  totalWidth = totalWidth + list[i].offsetWidth; //所有列表元素的总宽度
 }
 for(let i=0;i<list.length;i++){
  var _offset = totalWidth - box.clientWidth; //右边的偏移量
  list[i].addEventListener('click', function (e) {
   for(let j=0;j<list.length;j++){
    list[j].className = 'off'; //移除所有元素的样式
   }
   list[i].className = 'on';  //给点击的元素添加样式
   var offset =totalWidth - (Math.abs(listBox.offsetLeft) + box.clientWidth) + 100; //右边的偏移量 = 所有元素宽度之和 - (ul容器的左偏移量 + 父容器的宽度)
   if(e.pageX > width && offset > 0){ //点击右侧并且右侧的偏移量大于0,左滑。
    listBox.style.left = (listBox.offsetLeft-200) + 'px';
   }else if(e.pageX > width && offset > 200){ //临界位置,,右侧滚动到末尾
    listBox.style.left = -_offset + 'px';
   }
   if(e.pageX < width && listBox.offsetLeft < -200) { //点击左侧并且左侧的偏移量小于0,左滑。
    listBox.style.left = (listBox.offsetLeft + 200) + 'px';

   }else if(e.pageX < width && listBox.offsetLeft < 0){ //临界位置,左侧滚到开始的位置
    listBox.style.left = 0
   }

  });

 }

点击如下所示:

js实现水平滚动菜单导航

还有些不完善的地方,求各位大神指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JavaScript入门基础
Aug 12 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 #Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 #Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
angularjs下拉框空白的解决办法
2017/06/20 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
中软Java笔试题
2012/11/11 面试题
致400米运动员广播稿
2014/02/07 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
公司档案管理制度
2015/08/05 职场文书
导游词书写之黄山
2019/08/06 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python