最终效果,通过鼠标左右滑动,切换相对于的文章,如下:
1.html代码如下:
<div class="outer_div" >
<div class="box_div" id="div-fzjg">
<div class="box-content">
<div class="box-content-name">标题1</div>
<div class="box-li-circle"></div><div class="box-content-desc"> 内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111</div>
</div>
<div class="box-content">
<div class="box-content-name">标题2</div>
<div class="box-li-circle"></div><div class="box-content-desc">内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111</div>
</div>
<div class="box-content">box3</div>
</div>
</div>
<div style="text-align: center;">
<div class="box-num-item add-item-style"></div>
<div class="box-num-item"></div>
<div class="box-num-item"></div>
</div>
2.css代码布局如下:
.outer_div {
width: 100%;
height: 1.62rem;
overflow: hidden;
padding-left: 0.17rem;
}
.outer_div .box_div {
overflow-x: auto;
white-space: nowrap;
/* 元素之间不会有空隙 */
font-size: 0;
padding-bottom: 0.2rem;/* 通过子div的padding-bottom隐藏掉x轴的滚动条 */
}
.box_div .box-content {
box-sizing: border-box;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
display: inline-block;
margin-right: 0.2rem;
width: 2.26rem;
height: 1.62rem;
background: #FFFFFF;
box-shadow: 0rem 0rem 0.1rem 0.02rem rgb(207 207 207 / 25%);
border-radius: 0.08rem 0.08rem 0.08rem 0.08rem;
opacity: 1;
}
.box-content{
background-image: url(/static/images/index/success/background-img.png);
width: 2.36rem;
height: 2.36rem;
background-size: contain;
}
.box-content-desc{
font-size: 0.1rem;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 0.16rem;
-webkit-background-clip: text;
margin-top: -0.03rem;
margin-bottom: 0.21rem;
margin-right: auto;
-webkit-line-clamp: 8;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 1.9rem;
transform: scale(0.85);
}
.box-content-name{
width: 0.84rem;
font-size: 0.14rem;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 0.16rem;
-webkit-background-clip: text;
margin-top: 0.18rem;
margin-left: 0.32rem;
}
.box-li-circle{
width: 0.08rem;
height: 0.08rem;
border-radius: 0.08rem;
background: #FF6A00;
opacity: 1;
display: inline-block;
float: left;
margin-top: 0.1rem;
margin-left: 0.16rem;
margin-right: -0.06rem;
}
.box-num-item{
width: 0.2rem;
height: 0rem;
opacity: 1;
border: 0.01rem solid #FF6A00;
display: inline-block;
margin: 0 0.05rem;
}
.add-item-style{
border: 0.01rem solid #5B5B5B;
}
3.js代码如下,通过js去,实现左右滑动后的,标签显示的颜色切换:
<script>
document.getElementById('div-fzjg').addEventListener('scroll', (e)=>{
// e.target.scrollLeft 滚动条距离左边的距离(ps: 只有距离左边的和距离上面的距离,没有右边和下面的距离。)
// e.target.clientWidth 客户端显示宽度,高度大概同理,当距离左边的长度等于滚动条长度减去显示宽度即滚动到了最右边
if(e.target.scrollLeft < 90){
$('.box-num-item').eq(0).addClass('add-item-style').siblings().removeClass('add-item-style');
} else if(e.target.scrollLeft > 90 && e.target.scrollLeft < 300){
$('.box-num-item').eq(1).addClass('add-item-style').siblings().removeClass('add-item-style');
} else{
$('.box-num-item').eq(2).addClass('add-item-style').siblings().removeClass('add-item-style');
}
})
</script>