<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            list-style: none;

        }

        /* 控制其显示和隐藏 */

        .show {

            display: block !important;

        }

        .header {

            overflow: hidden;

            height: 25px;

            width: 100%;

            height: 25px;

            line-height: 25px;

            padding-bottom: 1px;

        }

        .header-tab {

            width: 100%;

            display: flex;

            overflow: hidden;

            white-space: nowrap;

            overflow-x: scroll;

            background-color: pink;

            white-space: nowrap;

            font-size: 15px;

        }

        .header-tab li {

            cursor: pointer;

            margin-left: 6px;

        }

        .wrapper {

            height: 600px;

            width: 100%;

            margin: 0 auto;

        }

        /* 其子元素为隐藏状态 */

        .wrapper>div {

            display: none;

        }

        /* 隐藏滚动条 */

        .header-tab::-webkit-scrollbar {

            display: none

        }

        /* 添加下划线 */

        .add2line {

            color: #3385ff;

            border-bottom: 1px solid #3385ff;

        }

    </style>

</head>

<body>

    <nav class="header">

        <ul class="header-tab" id="box">

            <li class="add2line">更新内容</li>

            <li>关注</li>

            <li>热点</li>

            <li>要闻</li>

            <li>我的生活</li>

            <li>国际新闻</li>

            <li>态度公开课</li>

            <li>新时代</li>

            <li>抖音视频</li>

        </ul>

    </nav>

    <main class="wrapper">

        <div class="show content">

            页面1

        </div>

        <div class="content">

            页面2

        </div>

        </div>

        <div class="content">

            页面3

        </div>

        <div class="content">

            页面4

        </div>

        <div class="content">

            页面5

        </div>

        <div class="content">

            页面6

        </div>

        <div class="content">

            页面7

        </div>

        <div class="content">

            页面8

        </div>

        <div class="content">

            页面9

        </div>

    </main>

</body>

</html>

<script>

    window.onload = function () {

        var doc = document

        isShow()

        function isShow() {

            var liArr = doc.querySelectorAll('#box > li')

            var divArr = doc.querySelectorAll('.wrapper .content')

            for (var i = 0; i < liArr.length; i++) {

                liArr[i].index = i;

                liArr[i].onclick = function () {

                    for (var j = 0; j < liArr.length; j++) {

                        liArr[j].className = ''

                        divArr[j].className = ''

                    }

                    divArr[this.index].className = 'show'

                    liArr[this.index].className = 'add2line'

                }

            }

        }

        // 当前视窗的宽度

        var WINDOW_OFFSETWIDTH = doc.documentElement.clientWidth

        var liArr = doc.querySelectorAll('#box > li')

        for (var i = 0; i < liArr.length; i++) {

            liArr[i].addEventListener('click', function (e) {

                // 获取当前点击元素的宽度

                var itemWidth = this.offsetWidth

                // 当前事件对象相对移动的距离

                var moveX = e.target.offsetLeft

                // 目标居中的距离 = (当前元素距离左边的相对距离 / 2)+ (视口距离 / 2)

                var left = moveX - (WINDOW_OFFSETWIDTH / 2) + (itemWidth / 2)

                doc.getElementById('box').scrollLeft = left

            })

        }

    }

</script>

js滑动导航栏点击后居中效果的更多相关文章

  1. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  2. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. JS面向对象方法（一）： 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  4. mpvue实战-手势滑动导航栏

    写点东西记录一下美好时光,上周学习了一下通过mpuve开发微信小程序,看完文档,就准备撸起袖子加油干的时候,一开始就被支持手势滑动的导航栏给搞懵逼了.求助一波百度和谷歌未果后,只能自己动脑动手!为了给 ...

  5. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  6. Bootstrap，导航栏点击效果修复（补）

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  7. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. js动态控制导航栏样式

    导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...

  9. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

随机推荐

  1. HZOI20190714 T1序列

    什么沙雕题啊……考察的是啥啊,分类咋搞啊……愁死我了…… 先把作者的正解放出来: 序列因为选出的一段是一个等比序列的子序列,我们分为两种情况:1. q=1,相当于找一个最长每个数都相等的子串,这个扫一 ...

  2. mysql 字段名和关键字冲突

    用"(`)"将有冲突的字段框起来,,键盘上1边上那个键. 例: SELECT * FROM yun_roleright WHERE right LIKE '%{13}%'; 上面s ...

  3. 禁用gpu首选

    import osos.environ["CUDA_DEVICE_ORDER"] = "PCI_BUS_ID"os.environ["CUDA_VIS ...

  4. ABSD 基于架构的软件设计方法方法简介（摘抄）

    ABSD(Architecture-Based Software Design)基于架构的软件设计方法 有三个基础: 第一个基础是功能分解.在功能分解中,ABSD方法使用已有的基于模块的内聚和耦合技术 ...

  5. Python--day48--面向对象回顾

    面向对象回顾: 例1: 例2: 特殊方法(要背会):

  6. win10 uwp 依赖属性

    本文告诉大家如何使用依赖属性,包括在 UWP 和 WPF 如何使用. 本文不会告诉大家依赖属性的好处,只是简单告诉大家如何使用 在 UWP 和 wpf ,如果需要创建自己的依赖属性,可以使用代码片,在 ...

  7. hadoop的6个进程启动不全，请试 比如datanode没有启动

      赋给hadoop用户hadoop-1.2.1读写权限 [root@master usr]# chown -R hadoop121:hadoop121 hadoop-1.2.1/   折腾了两个小时 ...

  8. HDU 3397"Sequence operation"（线段树区间和并）

    传送门 •题意 给你一个仅包含 0 和 1 的序列: 在这个序列上有如下操作: (1)0 a b : 将 [a,b] 区间的数置 0: (2)1 a b : 将 [a,b] 区间的数置 1: (3)2 ...

  9. 分析JVM动态生成的类

    总结思考:让jvm创建动态类及其实例对象,需要给它提供哪些信息? 三个方面: 1.生成的类中有哪些方法,通过让其实现哪些接口的方式进行告知: 2.产生的类字节码必须有个一个关联的类加载器对象: 3.生 ...

  10. 【u105】路径计数2

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一个N×N的网格,你一开始在(1, 1),即左上角.每次只能移动到下方相邻的格子或者右方相邻的格子,问 ...