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 相关文章推荐
json2.js的初步学习与了解
Oct 06 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
JS的get和set使用示例
Feb 20 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
php数组使用规则分析
2015/02/27 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
jQuery中:submit选择器用法实例
2015/01/03 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
详解python的argpare和click模块小结
2019/03/31 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python实现logistic分类算法代码
2020/02/28 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
分享一个python的aes加密代码
2020/12/22 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
材料物理专业个人求职信
2013/12/15 职场文书
党员培训思想汇报
2014/01/07 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
青年文明号汇报材料
2014/12/23 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP