<!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. Java容易搞错的知识点

    一.关于Switch 代码: Java代码 1         public class TestSwitch { 2             public static void main(Stri ...

  2. MySQL 8.0 技术详解

    MySQL 8.0 简介 MySQL 5.7 到 8.0,Oracle 官方跳跃了 Major Version 版本号,随之而来的就是在 MySQL 8.0 上做了许多重大更新,在往企业级数据库的路上 ...

  3. mosquitto/openssl 在RK3288上的编译以及MQTT客户端的代码示例

    1,依赖库openssl 的交叉编译 (1)配置编译器信息 setarch i386 ./config no-asm shared --cross-compile-prefix=arm-linux-a ...

  4. hdu 2986 Ballot evaluation (Simulation)

    Problem - 2986 之前在华工赛见过的一道简单的模拟,用map轻松干掉.为了精确,要全程用整型比较.轻松1y~ 代码如下: #include <cstdio> #include ...

  5. css3鼠标移动图片上移效果

    css3的功能真是很强大,学无止境,不多说,直接上代码 css部分: <style> ;;} .text-center{text-align:center} .col_cont{width ...

  6. 2012年NOIP普及组复赛题解

    题目涉及算法: 质因数分解:入门: 寻宝:模拟: 摆花:动态规划: 文化之旅:搜索. 质因数分解 题目链接:https://www.luogu.org/problem/P1075 这道题目只需要开个 ...

  7. PHP 面试题二

    1.抓取远程图片到本地,你会用什么函数? fsockopen, A 2.用最少的代码写一个求3值最大值的函数. function get_max($a,$b,$c) { return ($a > ...

  8. 解析XML内容到User对象

    users.xml <?xml version="1.0" encoding="UTF-8"?> <xml-root> <conn ...

  9. H3C 配置Basic NAT

  10. Python--day41--线程池--python标准模块concurrent.futures

    1,线程池代码示例:(注:进程池的话只要将以下代码中的ThreadPoolExecutor替换成ProcessPoolExecutor即可,这里不演示) import time from concur ...