企业官网建设流程全解析

效果图

过程

• 最外层盒子设置 flex 属性
• 内部 item 设置默认的宽高
• 展开的 item 设置 flex-grow 属性来填满剩余宽度

<styletype="text/css">.slideBox{display:flex;width:1000px;}.slideBox .sinSlide{width:80px;height:300px;}/* 当前展开的 item */.slideBox .sinSlide.active{flex-grow:1;}</style>

• 添加点击事件，用于切换当前展开的 item

<script>$(document).ready(function(){$(".sinSlide").click(function(){if($(this).hasClass("active")){// 啥都不做}else{$(".slideBox").find(".active").removeClass("active");$(this).addClass("active");}})})</script>

• item 内部添加图片内容
• 利用 img 的 object-fit 属性，使图片保持比例，填满盒子

<styletype="text/css">.slideBox .sinSlide .imgBox{width:100%;height:100%;}.slideBox .sinSlide .imgBox img{width:100%;height:100%;/* 保持图片比例填满容器 */object-fit:cover;}</style>...<divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic2.png"class="coverImg"></div></div>

• item 内部添加文字内容
• item 折叠时宽度较窄，只显示标题，item 展开时显示标题和描述内容

<styletype="text/css">.slideBox .sinSlide .textBox{width:100%;position:absolute;left:0;bottom:0;height:100%;}.slideBox .sinSlide .textBox .title{font-weight:bold;font-size:18px;}.slideBox .sinSlide .textBox .desc{display:none;font-size:14px;}.slideBox .sinSlide.active .textBox .desc{display:block;}</style>...<divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic2.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题2</div><divclass="desc">描述描述描述描述描述描述</div></div></div>

• 调整文字内容样式
• item 折叠时，标题居中竖向展示，item 展开时，标题和描述内容在底部展示
• item 折叠时，展示黑色遮罩，遮住全部，item 展开时，黑色遮罩只在文字部分下方

<styletype="text/css">.slideBox .sinSlide .textBox{width:100%;position:absolute;left:0;bottom:0;/* 渐变色背景，透明度 0.7 过渡到 透明度 0.3 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.3));box-sizing:border-box;/* 默认折叠时，居中展示 */height:100%;display:flex;align-items:center;justify-content:center;}.slideBox .sinSlide .textBox .title{/* 文字书写方向，竖向，从右到左 */writing-mode:vertical-lr;/* 文字转向适应垂直流 */text-orientation:upright;font-weight:bold;font-size:18px;}.slideBox .sinSlide.active .textBox{/* 展开时默认不设置高度，渐变背景就不会占全屏 */height:unset;/* 展开时不设置 flex，文字不会居中显示 */display:unset;padding:20px;/* 渐变背景由透明度 0.7 过渡到完全透明 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));}.slideBox .sinSlide.active .textBox .title{/* 展开时，文字改为横向书写由上到下 */writing-mode:horizontal-tb;margin-bottom:10px;}</style>

• 设置过渡和动画属性
• .sinSlide 只需要添加 transition 过渡属性，来过渡 width 变化即可
• 展开过程中，.sinSlide 添加了过渡属性，宽度不是瞬时变化，会出现 .desc 被折行的情况。为解决这个现象，为文字内容添加透明度的变化，即在展开足够宽度时，再显示文字内容。
  

<styletype="text/css">.slideBox .sinSlide{width:80px;height:300px;color:#fff;position:relative;/* 改变宽度，过渡属性 */transition:all 0.5s ease-in-out;}/* 文字内容设置透明度，在 80% 时才显示出来，防止出现手风琴展开过程中，.desc 内容挤到一起的现象 */@keyframesopacity{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}.slideBox .sinSlide.active .textBox{animation:opacity 0.5s linear forwards;}</style>

完整代码

<styletype="text/css">.slideBox{display:flex;width:1000px;}.slideBox .sinSlide{width:80px;height:300px;color:#fff;position:relative;/* 改变宽度，过渡属性 */transition:all 0.5s ease-in-out;}.slideBox .sinSlide .imgBox{width:100%;height:100%;}.slideBox .sinSlide .imgBox .coverImg{width:100%;height:100%;/* 保持图片比例填满容器 */object-fit:cover;}.slideBox .sinSlide .textBox{width:100%;position:absolute;left:0;bottom:0;/* 渐变色背景，透明度 0.7 过渡到 透明度 0.3 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.3));box-sizing:border-box;/* 默认折叠时，居中展示 */height:100%;display:flex;align-items:center;justify-content:center;}.slideBox .sinSlide .textBox .title{/* 文字书写方向，竖向，从右到左 */writing-mode:vertical-lr;/* 文字转向适应垂直流 */text-orientation:upright;font-weight:bold;font-size:18px;}.slideBox .sinSlide .textBox .desc{display:none;font-size:14px;}/* 文字内容设置透明度，在 80% 时才显示出来，防止出现手风琴展开过程中，.desc 内容挤到一起的现象 */@keyframesopacity{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}/* 当前展开的 item */.slideBox .sinSlide.active{flex-grow:1;}.slideBox .sinSlide.active .textBox{/* 展开时默认不设置高度，渐变背景就不会占全屏 */height:unset;/* 展开时不设置 flex，文字不会居中显示 */display:unset;padding:20px;/* 渐变背景由透明度 0.7 过渡到完全透明 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));animation:opacity 0.5s linear forwards;}.slideBox .sinSlide.active .textBox .title{/* 展开时，文字改为横向书写由上到下 */writing-mode:horizontal-tb;margin-bottom:10px;}.slideBox .sinSlide.active .textBox .desc{display:block;}</style><body><divclass="slideBox"><divclass="sinSlide active"><divclass="imgBox"><imgsrc="./images/pic1.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题1</div><divclass="desc">描述描述描述描述描述描述</div></div></div><divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic2.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题2</div><divclass="desc">描述描述描述描述描述描述</div></div></div><divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic3.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题3</div><divclass="desc">描述描述描述描述描述描述</div></div></div><divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic4.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题4</div><divclass="desc">描述描述描述描述描述描述</div></div></div><divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic5.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题5</div><divclass="desc">描述描述描述描述描述描述</div></div></div><divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic6.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题6</div><divclass="desc">描述描述描述描述描述描述</div></div></div><divclass="sinSlide"><divclass="imgBox"><imgsrc="./images/pic7.png"class="coverImg"></div><divclass="textBox"><divclass="title">标题7</div><divclass="desc">描述描述描述描述描述描述</div></div></div></div><script>$(document).ready(function(){$(".sinSlide").click(function(){if($(this).hasClass("active")){// 啥都不做}else{$(".slideBox").find(".active").removeClass("active");$(this).addClass("active");}})})</script></body>