摸鱼时，水一篇博客咯~~~分享两个小案例！！！！！！！！！！！！
前言
手风琴：仿王者荣耀做的一个小案例，结合JQuery.js
轮播图：仿华泰保险官网首页图做的小案例，结合ant-design-vue轮播图使用
一、手风琴
- 效果图
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
height: 150px;
/* width: 1500px; */
display: flex;
}
ul li {
list-style: none;
position: relative;
height: 134px;
cursor: pointer;
}
ul li>div {
display: inline-block;
width: 134px;
height: 134px;
}
ul li>img {
display: inline-block;
width: 291px;
height: 134px;
}
ul li:nth-child(1)>div {
background: url(./imgs/1b.jpg) no-repeat right 0;
}
ul li:nth-child(2)>div {
background: url(./imgs/2b.png) no-repeat right 0;
}
ul li:nth-child(3)>div {
background: url('./imgs/3b.jpg') no-repeat right 0;
}
ul li:nth-child(4)>div {
background: url('./imgs/4b.png') no-repeat right 0;
}
li div {
position: absolute;
left: 0;
top: 0;
}
/* 控制隐藏 */
ul li:nth-child(1) {
width: 291px;
div {
display: none;
}
}
ul li:nth-child(n+2){
width: 134px;
img {
display: none;
}
}
</style>
</head>
<body>
<ul>
<li>
<div></div>
<img src="./imgs/1b.jpg" alt="" srcset="">
</li>
<li>
<div></div>
<img src="./imgs/2b.png" alt="" srcset="">
</li>
<li>
<div></div>
<img src="./imgs/3b.jpg" alt="" srcset="">
</li>
<li>
<div></div>
<img src="./imgs/4b.png" alt="" srcset="">
</li>
</ul>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul li").mouseenter(function() {
// 当前li变宽，小图淡出，大图淡入
$(this).stop().animate({
width: 291
}, 200).find("div").stop().fadeOut().siblings("img").stop().fadeIn()
$(this).siblings("li").stop().animate({
width: 134
}, 200).find("img").stop().fadeOut().siblings("div").stop().fadeIn()
})
})
</script>
</body>
</html>二、轮播图
效果图（注：文中代码只将每张图片切成竖条逐个展示，竖条图片未再切成一小块一小块的！！！）
华泰保险效果图
本文效果图
代码
html：
<a-carousel ref="swiperPic" effect="fade" autoplay v-if="bannerList!=null" :beforeChange="beforeChange">
<div v-for="(item, index) in bannerList" :key="item.id" class="photo"
:style="{height: imgHeight+'px', }"
>
<img class="logoJH photo-clip" :class="currentPic === index?'down-enter-one':''" :src="(item.image)" alt="">
<img class="logoJH photo-clip" :class="currentPic === index?'down-enter-two':''" :src="(item.image)" alt="">
<img class="logoJH photo-clip" :class="currentPic === index?'down-enter-three':''" :src="(item.image)" alt="">
<img class="logoJH photo-clip" :class="currentPic === index?'down-enter-four':''" :src="(item.image)" alt="">
<img class="logoJH photo-clip" :class="currentPic === index?'down-enter-five':''" :src="(item.image)" alt="">
<img class="logoJH photo-clip" :class="currentPic === index?'down-enter-six':''" :src="(item.image)" alt="">
<img class="bgImg" :src="(bannerList[oldPic].image)" alt="">
</div>
</a-carousel>
js：
data() {
return {
screenWidth: document.body.clientWidth,
currentPic: 0,
oldPic: 0,
bannerList:[{image: '图片地址', id: ''}, {}, ...],
}
}
mounted() {
const that = this
window.onresize = () => {
return (() => {
that.screenWidth = document.body.clientWidth
// console.log(that.screenWidth)
})()
}
},
watch: {
screenWidth(val) {
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if (!this.timer) {
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function() {
// console.log(that.screenWidth)
// that.imgHeight = 672/2114*Number(that.screenWidth)
that.timer = false
}, 400)
}
},
currentPic(n, o) {
this.oldPic = o
}
},
computed: {
imgHeight() {
let num = 672/2114*Number(this.screenWidth)
return num
}
},
methods: {
beforeChange (from, to) {
this.currentPic = to;
},
}
css：
.photo .photo-clip:nth-of-type(1) {
/*photo-clip是每一个碎片对应的包裹的div盒子*/
-webkit-clip-path: inset(0 83.3% 0 0);
clip-path: inset(0 83.3% 0 0);
}
.photo .photo-clip:nth-of-type(2) {
/*photo-clip是每一个碎片对应的包裹的div盒子*/
-webkit-clip-path: inset(0 65% 0 16.7%);
clip-path: inset(0 66.6% 0 16.6%);
}
.photo .photo-clip:nth-of-type(3) {
/*photo-clip是每一个碎片对应的包裹的div盒子*/
-webkit-clip-path: inset(0 48% 0 34%);
clip-path: inset(0 50% 0 33.3%);
}
.photo .photo-clip:nth-of-type(4) {
/*photo-clip是每一个碎片对应的包裹的div盒子*/
-webkit-clip-path: inset(0 33% 0 49.9%);
clip-path: inset(0 33% 0 49.9%);
}
.photo .photo-clip:nth-of-type(5) {
-webkit-clip-path: inset(0 16.7% 0 72%);
clip-path: inset(0 16.6% 0 66.7%);
}
.photo .photo-clip:nth-of-type(6) {
-webkit-clip-path: inset(0 0 0 83.3%);
clip-path: inset(0 0 0 83.3%);
}
.photo {
position: relative;
}
.photo .photo-clip {
position: absolute;
}
.down-enter-one {
animation: move 0.3s ease-in reverse;
}
.down-enter-two {
animation: move 0.5s ease-in reverse;
}
.down-enter-three {
animation: move 0.7s ease-in reverse;
}
.down-enter-four {
animation: move 0.8s ease-in reverse;
}
.down-enter-five {
animation: move 0.9s ease-in reverse;
}
.down-enter-six {
animation: move 1s ease-in reverse;
}
@keyframes move {
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(50%, 50%) scale(0);
}
}
.bgImg {
position: absolute;
left: 0;
top: 0;
z-index: -100;
opacity: 0.7;
width: 100%;
}总结
分享简单的两个小案例，等待放假啦！！！友友们，下一篇分享一个Vue2项目：既可以发布成一个npm包，也可以被部署发布哦；且依赖包利用微前端（无界）可兼容在Vue3项目里。
标签：轮播,clip,nth,photo,li,案例,path,手风琴,div From： https://blog.csdn.net/qq_44828539/article/details/142872005