<!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. PHP 7.0新增特性详解

    https://www.cnblogs.com/riverdubu/archive/2017/03/22/6434705.html 开始介绍PHP7.0新特性,具体的可以参照官网的介绍,我来挑一些给大 ...

  2. celery 计划任务使用

    流程: 用户提交任务 --- > Celery --- > Broker 中间商(可以是数据库,redis) ---> 最后让celery 中的 worker 执行任务 1 单独使用 ...

  3. selenium webdriver学习（五）------------iframe的处理(转)

    selenium webdriver学习(五)------------iframe的处理 博客分类: Selenium-webdriver 如何定位frame中元素  有时候我们在定位一个页面元素的时 ...

  4. behavior planning——inputs to transition functions

    the answer is that we have to pass all  of the data into transition function except for the previous ...

  5. docker + jenkins 自动化部署

    公司书架上有本docker的书籍,正好最近事不多就写个demo来玩一玩. DevOps未死,ContainerOps已到 ContainerOps VS DevOps 避免了复杂的环境,应用之间的相互 ...

  6. Bert系列（三）——源码解读之Pre-train

    https://www.jianshu.com/p/22e462f01d8c pre-train是迁移学习的基础,虽然Google已经发布了各种预训练好的模型,而且因为资源消耗巨大,自己再预训练也不现 ...

  7. Treap（树堆）入门

    作者:zifeiy 标签:Treap 首先,我么要知道:Treap=Tree+Heap. 这里: Tree指的是二叉排序树: Heap指的是堆. 所以在阅读这篇文章之前需要大家对 二叉查找树 和 堆( ...

  8. 地址中如果含有"+"，发给服务器时"+"变成了空格问题解析

    如地址为sms:+7 915 444-414-444,含有空格. 服务器解码 URLDecoder.decode("sms:+7 915 444-414-444"),返回的是sms ...

  9. P1058 车厢重组

    题目描述 在一个旧式的火车站旁边有一座桥,其桥面可以绕河中心的桥墩水平旋转.一个车站的职工发现桥的长度最多能容纳两节车厢,如果将桥旋转 \(180\) 度,则可以把相邻两节车厢的位置交换,用这种方法可 ...

  10. Java中getBytes()方法--使用详解

    getBytes()方法详解 在Java中,String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组.这表示在不同的操作系统下,返回的东西不一样! 1. str.getByte ...