js滑动导航栏点击后居中效果
<!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滑动导航栏点击后居中效果的更多相关文章
- ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- JS面向对象方法（一）： 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...
- mpvue实战-手势滑动导航栏
写点东西记录一下美好时光,上周学习了一下通过mpuve开发微信小程序,看完文档,就准备撸起袖子加油干的时候,一开始就被支持手势滑动的导航栏给搞懵逼了.求助一波百度和谷歌未果后,只能自己动脑动手!为了给 ...
- 在UWP中页面滑动导航栏置顶
最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...
- Bootstrap，导航栏点击效果修复（补）
前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发: 先看个Demo吧,点这里.你会发现,点击是没有效果 ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- js动态控制导航栏样式
导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...
- 原生js实现导航栏吸顶
实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...
随机推荐
- python selenium 测试浏览器(IE,FF,Chrome)
browser_engine.py # coding=utf-8 from selenium import webdriver class BrowserEngine(object): "& ...
- java一般处理高并发的技术手段
应对高并发的解决方案: 1.将压力放在数据库上面,添加行级锁. select * from table for update; 2.将压力放在应用程序上面,对方法加synchronized同步.
- 利用scrapy爬取文件后并基于管道化的持久化存储
我们在pycharm上爬取 首先我们可以在本文件打开命令框或在Terminal下创建 scrapy startproject xiaohuaPro ------------创建文件 scrapy ...
- Tensorflow中tf.ConfigProto()详解
参考Tensorflow Machine Leanrning Cookbook tf.ConfigProto()主要的作用是配置tf.Session的运算方式,比如gpu运算或者cpu运算 具体代码如 ...
- 2018-8-10-git-使用-VisualStudio-比较分支更改
title author date CreateTime categories git 使用 VisualStudio 比较分支更改 lindexi 2018-08-10 19:16:52 +0800 ...
- JS精度问题,解决方案 math.js
JS精度问题 Vue中使用 解决方案 math.js npm install mathjs import { create, all } from 'mathjs' const config = ...
- Python--day60--建立第一个Djiango项目
- H3C 入站包过滤工作流程
- Python3 dir() 函数
Python dir() 函数 描述 dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如 ...
- tomcat最大线程数的设置
Tomcat的server.xml中连接器设置如下 <Connector port="8080" maxThreads="150" minSpareThr ...