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网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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电台频率大全 - 28 甘肃省
2020/03/11 无线电
php 执行系统命令的方法
2009/07/07 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
ES6函数实现排它两种写法解析
2020/05/13 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python实现文件按照日期命名的方法
2015/07/09 Python
详解python中的线程与线程池
2019/05/10 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
编写python代码实现简单抽奖器
2020/10/20 Python
毕业生个人的求职信范文
2013/12/03 职场文书
村官工作鉴定评语
2014/01/27 职场文书
公司寄语大全
2014/04/10 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python
python manim实现排序算法动画示例
2022/08/14 Python