刚学到js,就想着用js做一点特效,看到element-ui里面的这个图片切换特效就非常有意思,然后自己就尝试着做了一下;
*{ margin: 0;padding: 0;list-style: none; } .box{ width: 900px;height: 360px; } .box ul{ width: 900px;height: 360px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; position: relative; } .box ul li{ position: relative; transition: all 0.8s ease; } .box ul li img{ position: relative;//添加定位利用zIndex让图片显示在最上面 border: 1px solid skyblue; width: 300px; }
先给图片定义样式(因为自己喜欢玩阴阳师,所以就去阴阳师官网找的图片),再定义div盒子的框架
<div class="box"> <ul> <li><img src="image/ssr不知火.png" alt="" style="background-color:yellow;"></li> <li><img src="image/ssr彼岸花.png" alt="" style="background-color:blue;"></li> <li><img src="image/ssr缘结神.png" alt="" style="background-color:pink;"></li> </ul> </div>
接下来就是js部分
首先获取元素内容:
let box = document.querySelector('.box'); let ul = document.querySelector('ul'); let lis = document.querySelectorAll('li'); for (let i = 0; i < 3; i++) {//利用循环给所有小li添加点击事件 lis[i].setAttribute('index',i.toString());//给小li添加下标index lis[1].style.transform = 'scale(1.2)';//将中间图片放大 lis[1].style.zIndex = '999';//利用zIndex将中间的图片显示在最上层 lis[i].addEventListener('click',function (){ for (let j = 0; j < lis.length; j++) { lis[j].style.zIndex = '0'; }//将所有小li的zIndex设置为0 this.style.zIndex = '999';//点击之后让当前的小li显示在最上层 let index = this.getAttribute('index');//获取li的下标 //判断点击的是哪个小li,分别设置样式,这里我没想出来是不是有更好的方法。。。 if (index==='2'){ this.style.transform = 'scale(1.2) translateX(-250px)'; lis[1].style.transform = 'scale(1) translateX(-300px)'; lis[0].style.transform = 'translateX(600px)' }else if(index==='0'){ this.style.transform = 'scale(1.2) translateX(250px)'; lis[1].style.transform = 'scale(1) translateX(300px)'; lis[2].style.transform = 'translateX(-600px)' }else if(index==='1'){ this.style.transform = 'scale(1.2) translateX(0)'; lis[0].style.transform = 'scale(1) translateX(0)'; lis[2].style.transform = 'scale(1) translateX(0)' } }) }