----------------------------------------------------------效果展示-----------------------------------------------------------
1.思路:
通过flex弹性布局修改子元素在父元素内的分布情况,因为有元素的部分内容不在父元素之内,除了添加active类的方式控制交互,还需要对添加类的元素进行检查,当检查为最后一个元素的时候控制盒子进行移动(考虑到这点需要在三个子元素之上再添加一个父元素,通过这个父元素来控制他们在盒子内的位移)。
2.代码段:
<!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>
.box1{
width:400px;
height:320px;
margin:80px auto;
background-color: #5f5e5e;
border-radius: 20px;
overflow:hidden ;
}
.box1-next{
width:500px;
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-around;
margin-top:120px;
transition: all 1s;/*控制左右移动动画*/
}
.box2{
border-radius: 10px;
width: 130px;
height:170px;
background-color: #ff6262;
transition: all 1s;/*控制回落动画*/
}
.box1-next .active{
transform: translateY(-100px);
transition: all 1s;/*控制上升动画*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box1-next">
<div class="box2 active"></div>
<div class="box2 "></div>
<div class="box2 "></div>
</div>
</div>
<script>
let box1 = document.querySelector('.box1')
let box2 = document.querySelectorAll('.box2')
let temp = document.querySelector('.box1 .box2:last-child')
let box1_next = document.querySelector('.box1-next')
box2.forEach(function(element){/*因为选择的所有box2,所以选择的结果是个数组,对于数组中的每个元素*/
element.addEventListener('mouseenter',function(e){
if(e.target.tagName === 'DIV'){
document.querySelector('.box1 .active').classList.remove('active')
e.target.classList.add('active')
if ( temp.classList.contains('active')){/*一开始选择的是第一个盒子,但发现选择最后一个盒子更合适*/
box1_next.style.marginLeft='-120px'
}
else{
box1_next.style.marginLeft='0px'
}
}
})
})
</script>
</body>
</html>
3.在这个的基础上,添加一些额外的图片和CSS样式。
代码如下:
<!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>
.box1{
position: relative;
border:2px solid rgb(196, 190, 190);
width:400px;
height:320px;
margin:80px auto;
border-radius: 20px;
overflow:hidden ;
}
.box1-img{
position: absolute;
top:0px;
z-index:-1;
filter: contrast(100%) brightness(120%);
}
.box1-next{
width:500px;
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-around;
margin-top:120px;
transition: all 1s;
}
.box2{
position:relative;
overflow: hidden;
border-radius: 10px;
width: 130px;
height:170px;
background-color: #ff6262;
transition: all 1s;
box-shadow: 0 5px 10px 0 rgba(20, 20, 20,0.3);
}
.box1-next .active{
transform: translateY(-100px);
transition: all 1s;
}
.box2 img{
width:130px;
border-radius: 10px;
}
.box2 span{
display: inline-block;
width:40px;
height:40px;
background-color: #fcfcfc;
border-radius: 100%;
position: absolute;
font-weight: bold;
font-size: 28px;
bottom:20px;
color:#ff6262;
right:10px;
line-height: 40px;
text-align: center;
border:1px solid #ff6262;
}
.box2 .font-black{
bottom:120px;
color:#ff6262;
}
</style>
</head>
<body>
<div class="box1">
<img class="box1-img" src="./bgimg/bgimg1.png" alt="">
<div class="box1-next">
<div class="box2 active">
<a href="javascript:;"><img src="./img/mqm4.png" alt=""><span class="font-white">玛</span></a>
</div>
<div class="box2 ">
<a href="javascript:;"><img src="./img/mqm1.png" alt=""><span class="font-black">奇</span></a>
</div>
<div class="box2 ">
<a href="javascript:;"><img src="./img/mqm3.png" alt=""><span class="font-white">玛</span></a>
</div>
</div>
</div>
<script>
let box1 = document.querySelector('.box1')
let box2 = document.querySelectorAll('.box2')
let temp = document.querySelector('.box1 .box2:last-child')
let box1_next = document.querySelector('.box1-next')
box2.forEach(function(element){
element.addEventListener('mouseenter',function(e){
if(e.target.tagName === 'DIV'){
document.querySelector('.box1 .active').classList.remove('active')
e.target.classList.add('active')
if ( temp.classList.contains('active')){
box1_next.style.marginLeft='-120px'
}
else{
box1_next.style.marginLeft='0px'
}
}
})
})
</script>
</body>
</html>
4.同样的可以在此基础上,拓展出其他的效果。
代码如下:
<!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>
.box1{
position: relative;
display :flex;
border:2px solid rgb(196, 190, 190);
width:520px;
height:250px;
margin:80px auto;
border-radius: 20px;
overflow:hidden ;
}
.box1-img{
position: absolute;
top:0px;
z-index:-1;
filter: contrast(100%) brightness(120%);
}
.box1-next{
margin:15px 0px;
position:absolute;
width:520px;
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-around;
align-items: center;
transition: all 1s;
}
.box2{
position:relative;
overflow: hidden;
border-radius: 10px;
width: 130px;
height:170px;
background-color: #ff6262;
transition: all 1s;
box-shadow: 0 5px 10px 0 rgba(20, 20, 20,0.3);
}
.box1-next .active{
width:169px;
height:221px;
transition: all 1s;
}
.box2 img{
width:100%;
border-radius: 10px;
}
.box2 span{
display: inline-block;
width:40px;
height:40px;
background-color: #fcfcfc;
border-radius: 100%;
position: absolute;
font-weight: bold;
font-size: 28px;
bottom:20px;
color:#ff6262;
right:10px;
line-height: 40px;
text-align: center;
border:1px solid #ff6262;
}
.box2 .font-black{
top:10px;
bottom:0px;
color:#ff6262;
}
</style>
</head>
<body>
<div class="box1">
<img class="box1-img" src="./bgimg/bgimg1.png" alt="">
<div class="box1-next">
<div class="box2 active">
<a href="javascript:;"><img src="./img/mqm4.png" alt=""><span class="font-white">玛</span></a>
</div>
<div class="box2 ">
<a href="javascript:;"><img src="./img/mqm1.png" alt=""><span class="font-black">奇</span></a>
</div>
<div class="box2 ">
<a href="javascript:;"><img src="./img/mqm3.png" alt=""><span class="font-white">玛</span></a>
</div>
</div>
</div>
<script>
let box1 = document.querySelector('.box1')
let box2 = document.querySelectorAll('.box2')
let temp = document.querySelector('.box1 .box2:last-child')
let box1_next = document.querySelector('.box1-next')
box2.forEach(function(element){
element.addEventListener('mouseenter',function(e){
if(e.target.tagName === 'DIV'){
document.querySelector('.box1 .active').classList.remove('active')
e.target.classList.add('active')
}
})
})
</script>
</body>
</html>