日志
首页标签导航点击滑动居中
<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>
</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>
