<!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. AtCoder Regular Contest 060

    C - 高橋君とカード / Tak and Cards 思路:dp,先说说我想的,我写的dp数组是dp[i][j][k],表示从前i个数字中,选择j个数字,平均值为k,则dp[i][j][k] = d ...

  2. 20190527-JavaScriptの打怪升级旅行 { 语句 [ 声明 ，变量 ] }

    写在前面的乱七八糟:时间总是轻易地溜走,不留一丝念想,近一个月,倒是过得有点丧,从今天开始起,已经开始接触后台了,而JavaScript也只是大致有了个分类框架,那些细枝末节还有的补,任重道远,天将降 ...

  3. Android Xutils框架使用问题及解决办法

    刚刚写了篇博客,提了下在使用XUtils时遇到的一个问题Android Xutils框架HttpUtil Get请求缓存问题 ,既然已经提起来这个问题,那我想了下,就把之前使用Xutils时遇到的几个 ...

  4. 洛谷P4136 谁能赢呢？ 题解 博弈论

    题目链接:https://www.luogu.org/problem/P4136 找规律 首先这道题目我没有什么思路,所以一开始想到的是通过搜索来枚举 \(n\) 比较小的时候的情况. 所以我开搜索枚 ...

  5. html设计时 img与元素存在间距的处理

    在学习开发笔书奇小说网站时,遇到一下问题 问题点: 在初始化CSS中设置了img的padding和margin为0,可是在插入img后,img与父元素仍然有一定间距. 原因分析: 文字图片等inlin ...

  6. C# TransactionScope 事务类

    微软自带的TransactionScope(.Net Framework 2之后)是个好东东,提供的功能也很强大. 首先说说TransactionScope是什么,并能为我们做什么事情.其实看Tran ...

  7. Python--day69--ORM聚合查询和分组查询

    聚合查询和分组查询 聚合 aggregate()是QuerySet 的一个终止子句,意思是说,它返回一个包含一些键值对的字典. 键的名称是聚合值的标识符,值是计算出来的聚合值.键的名称是按照字段和聚合 ...

  8. 2015-2016 ACM-ICPC Southwestern Europe Regional Contest (SWERC 15)

    C. Canvas Painting 合并果子. E. Wooden Signs \(dp(i,l,r)\)表示第\(i\)块木板的长度区间为\([l,r]\)的方案数,根据题意,\(l\)或\(r\ ...

  9. Linux下的实用工具——计算器bc

    Linux下的实用工具——计算器   1. bc指令算加法,如图: 4. bc指令算除法(进阶),如图示,10/3之所以为3,是因为我们没有指定小数点后取几位,默认取到整数部分:而10/100之所以为 ...

  10. Python--day43--补充之主键和外键

    主键只有一个,但是可以用两列不为空的值组成: