css：用flex布局自动处理浮动，也不用去计算ul的宽度。
js：
1.当前点击的li距离屏幕左边的距离
2.li的宽度的一半
3.总屏幕宽度的一半
4.当前滚动条滚动的距离
最后结果：
当前滚动条滚动的距离+（当前点击的li距离屏幕左边的距离-总屏幕宽度的一半）+li的宽度的一半
效果如图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>css3 title 滑动显示</title>
<style>
.tab {
width: 100%;
background: #fff;
overflow: auto;
}
/* 隐藏滚动条 */
.tab::-webkit-scrollbar {
display: none;
}
.tab-ul {
display: flex;
display: -webkit-flex;
padding: 0;
}
.tab-ul li {
flex: 0 0 20%;
text-align: center;
list-style: none;
}
.tab-ul li.active {
background: pink;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-ul">
<li class="active">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>
</ul>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.tab-ul li').on('click', function() {
$('.tab-ul li').removeClass('active');
$(this).addClass('active');
var liLeft = $(this).offset().left;
var liWidth = $(this).width()/2;
var widths = $(window).width()/2;
var scrollL = $('.tab').scrollLeft();
$('.tab').animate({
scrollLeft: scrollL + (liLeft - widths) + liWidth
})
})
})
</script>
</body>
</html>
1406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
