1. jquery方式实现点击事件动效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery主页手风琴动效</title>
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #171717;
}
.box {
width: 1168px;
height: 519px;
background: red;
margin: 50px auto;
}
.item {
width: 119px;
height: 519px;
float: left;
transition: width 0.2s;
}
.item:nth-child(1) {
background: url("images/feature-1.png") no-repeat 100% 100%;
/*background-size: 100% 100%; 背景图尺寸 */
}
.item:nth-child(2) {
background: url("images/feature-2.png") no-repeat 100% 100%;
}
.item:nth-child(3) {
background: url("images/feature-3.png") no-repeat 100% 100%;
}
.item:nth-child(4) {
background: url("images/feature-4.png") no-repeat 100% 100%;
}
.item:nth-child(5) {
background: url("images/feature-5.png") no-repeat 100% 100%;
}
.big {
width: 692px;
}
.big img {
display: none;
height: 519px;
}
</style>
<script type="text/javascript">
$(function () {
$(".item").click(function () {
$(this).addClass("big").siblings().removeClass("big");
});
});
</script>
</head>
<body>
<div class="box">
<div class="item big"><img src="images/01.png" alt="" /></div>
<div class="item"><img src="images/02.png" alt="" /></div>
<div class="item"><img src="images/03.png" alt="" /></div>
<div class="item"><img src="images/04.png" alt="" /></div>
<div class="item"><img src="images/05.png" alt="" /></div>
</div>
</body>
</html>
2. vue方式实现点击事件动效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue主页手风琴动效</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #171717;
}
.box {
width: 1168px;
height: 519px;
background: red;
margin: 50px auto;
}
.item {
width: 119px;
height: 519px;
float: left;
transition: width 0.2s;
}
.item:nth-child(1) {
background: url("images/feature-1.png") no-repeat 100% 100%;
/*background-size: 100% 100%; 背景图尺寸 */
}
.item:nth-child(2) {
background: url("images/feature-2.png") no-repeat 100% 100%;
}
.item:nth-child(3) {
background: url("images/feature-3.png") no-repeat 100% 100%;
}
.item:nth-child(4) {
background: url("images/feature-4.png") no-repeat 100% 100%;
}
.item:nth-child(5) {
background: url("images/feature-5.png") no-repeat 100% 100%;
}
.big {
width: 692px;
}
.big img {
display: none;
height: 519px;
}
</style>
</head>
<body>
<div id="container" class="box">
<div
v-for="(item, index) in imgList"
:class="{
item:true,
big: selectIndex === index
}"
@click="selectIndex = index"
>
<img :src="item" alt="" />
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
selectIndex: 0,
imgList: [
"images/01.png",
"images/02.png",
"images/03.png",
"images/04.png",
"images/05.png",
],
},
});
</script>
</body>
</html>
标签：jquery,vue,100%,item,动效,repeat,background,images,png From： https://www.cnblogs.com/DTCLOUD/p/17222248.html注：里面的图片自己可以找替换的，或者参考链接
作者：白马不是马