<!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. List of the best open source software applications

    List of the best open source software applications by Ryan • Oct 25th, 2008 • Category: Featured Art ...

  2. 利用mock生成随机的东西

    Mock.mock({ "list|100": [ { 'id|+1': 1,//id排列 'color': '@color()',//随机颜色 'date': '@datetim ...

  3. thinkphp 本地配置手机移动端，在pc端访问手机端

  4. git比较两个版本之间的区别

    查看当前没有add 的内容修改: git diff 查看已经add 没有commit 的改动 git diff --cached 查看当前没有add和commit的改动: git diff HEAD ...

  5. ios html5头部无法固定的问题（安卓正常）

    需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在ios上下拉的时候头部被带下来,有卡顿用户体验也不会,解决方法如下: 有问题的布局代码 <div class="page&q ...

  6. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. 【转载】.NET中使用Redis

    Redis是一个用的比较广泛的Key/Value的内存数据库,新浪微博.Github.StackOverflow 等大型应用中都用其作为缓存,Redis的官网为http://redis.io/. 最近 ...

  8. HTML静态网页--框架

    框架: 1.frameset frameset最外层的去掉body,直接用frameset 在超级链接指定目标页面显示在哪个框架窗口中 第一步:给要显示内容的目标frame设置name属性 第二步:给 ...

  9. Lifecycle mapping "org.eclipse.m2e.jdt.JarLifecycleMapping" Eclipse Maven报错

    eclipse 项目中报错Lifecycle mapping "org.eclipse.m2e.jdt.JarLifecycleMapping" is not available, ...

  10. win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪

    我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了? 经过我的测试,发现默认是不会被裁剪 火火问了我一个问题,如果有一 ...