javascript - 哪位大神指导下，如何实现今日头条头部导航列表，点那个类型，哪种类型就居中了？
本文介绍了javascript - 哪位大神指导下，如何实现今日头条头部导航列表，点那个类型，哪种类型就居中了？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
现在点的科技，科技就在中间，如何点其他其他也跑到中间？
解决方案
<!doctype html>
<head>
<title>progressbar demo</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<style type="text/css">
.wrapper {
position: relative;
width: 100%;
height: 30px;
overflow: hidden;
}
.nav {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 30px;
background: red;
margin: 0;
padding: 0;
}
.nav li {
height: 30px;
float: left;
list-style: none;
line-height: 30px;
padding: 0 40px;
margin: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="nav">
<li>第0个</li>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
<li>第8个</li>
<li>第9个</li>
<li>第10个</li>
<li>第11个</li>
<li>第12个</li>
<li>第13个</li>
<li>第14个</li>
<li>第15个</li>
<li>第16个</li>
<li>第17个</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
var totalWidth = 0;
var blockWidth = $('.wrapper').width();
$('.wrapper .nav li').each(function() {
totalWidth += $(this).outerWidth(true);
});
$('.wrapper .nav').width(totalWidth);
var origin = $('.wrapper .nav li:first-child').position();
$('.wrapper .nav li').click(function() {
var position = $(this).position();
var outerWidth = $(this).outerWidth(true);
var offsetX = position.left - origin.left; // 当前点击元素的相对横向偏移
var centerX = offsetX + outerWidth / 2; // 当前点击元素中点相对横坐标
if(totalWidth <= blockWidth) {
// 可见区域比ul区域大
// 不进行任何操作
} else {
if(centerX < blockWidth / 2) {
// 元素中点左侧距离小于可见区域的一半
// 就不能将当前元素滑到中间，否则左侧会空出来
// 只能使left为0
$('.wrapper .nav').animate({left: 0}, 1000);
} else if(centerX + blockWidth / 2 > totalWidth) {
// 元素中点坐标加上可见区域的一半大于ul总宽度
// 就不能将当前元素滑到中间，否则右侧会空出来
// 只能使left为blockWidth - totalWidth
$('.wrapper .nav').animate({left: blockWidth - totalWidth}, 1000);
} else {
// 正常居中
$('.wrapper .nav').animate({left: blockWidth / 2 - centerX}, 1000);
}
}
});
})
</script>
</body>
</html>效果：
这篇关于javascript - 哪位大神指导下，如何实现今日头条头部导航列表，点那个类型，哪种类型就居中了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
