导航栏滑动居中

html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>title>
    <style type="text/css">
        header {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            overflow-x: scroll;
        }
        header::-webkit-scrollbar {
            display: none;
        }

        .nav {
            display: inline-block;
            margin-left: 15px;
            margin-right: 10px;
            height: 50px;
            line-height: 50px;

        }
    style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
head>
<body>
<header>
    <div class="nav">
        基本信息
    div>
    <div class="nav">
        今借到
    div>
    <div class="nav">
        多头借贷
    div>
    <div class="nav">
        运营商
    div>
    <div class="nav">
        央行征信信息
    div>
    <div class="nav">
        支付宝信息
    div>
    <div class="nav">
        法院失信名单
    div>
    <div class="nav">
        学历信息
    div>
    <div class="nav">
        社保信息
    div>
    <div class="nav">
        公积金信息
    div>
header>
<script type="text/javascript">
    $(function(){
        $(".nav").on("click",function(ev){
            var moveX = $(this).position().left+$(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            console.log(moveX)
            console.log(pageX);
            console.log(blockWidth);
            var left = moveX-(pageX/2)+(blockWidth/2);
            console.log(left);
            $(this).css("color","red").siblings().css("color","#000000");
            $("header").scrollLeft(left);


        })




    });
script>
body>
html>

你可能感兴趣的:(前端)