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宝典学习笔记(上)
Jan 10 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
js实现照片墙功能实例
Feb 05 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
修改 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计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
js输出列表实现代码
2010/09/12 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
python实现连续图文识别
2018/12/18 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
简单了解python中对象的取反运算符
2019/07/01 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python模块常用用法实例详解
2019/10/17 Python
python selenium操作cookie的实现
2020/03/18 Python
Python 实现一个简单的web服务器
2021/01/03 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
学校政风行风整改方案
2014/10/25 职场文书
内乡县衙导游词
2015/02/05 职场文书
如何在Python中创建二叉树
2021/03/30 Python
详解php中流行的rpc框架
2021/05/29 PHP