分享一个用原生JS实现的影集展示特效，效果如下：
实现的代码如下：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS实现影集展示特效</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 300px;
height: 200px;
position: absolute;
transition: 0.8s;
transform: perspective(800px);
}
li img {
width: 100%;
height: 100%;
}
li.s0 {
left: 50%;
margin-left: 450px;
top: 50%;
margin-top: -100px;
transform: perspective(800px) rotateY(-90deg);
opacity: 0;
}
li.s1 {
left: 50%;
margin-left: -750px;
top: 50%;
margin-top: -100px;
transform: perspective(800px) rotateY(90deg);
opacity: 0;
}
li.s2 {
left: 50%;
margin-left: -550px;
top: 50%;
margin-top: -100px;
transform: perspective(800px) rotateY(60deg);
opacity: 0.5;
}
li.s3 {
left: 50%;
margin-left: -350px;
top: 50%;
margin-top: -100px;
transform: perspective(800px) rotateY(30deg);
}
li.s4 {
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -100px;
z-index: 3;
}
li.s5 {
left: 50%;
margin-left: 50px;
top: 50%;
margin-top: -100px;
transform: perspective(800px) rotateY(-30deg);
z-index: 2;
}
li.s6 {
left: 50%;
margin-left: 250px;
top: 50%;
margin-top: -100px;
transform: perspective(800px) rotateY(-60deg);
opacity: 0.5
}
</style>
</head>
<body>
<ul>
<li class='s0'><img src="images/0.jpg"></li>
<li class='s1'><img src="images/1.jpg"></li>
<li class='s2'><img src="images/2.jpg"></li>
<li class='s3'><img src="images/3.jpg"></li>
<li class='s4'><img src="images/4.jpg"></li>
<li class='s5'><img src="images/5.jpg"></li>
<li class='s6'><img src="images/7.jpg"></li>
</ul>
<script type="text/javascript">
var arr = [];
var allLi = document.getElementsByTagName('li');
for (var i = 0; i < allLi.length; i ) {
arr.push(allLi[i].className);
};
onclick = function () {
// 删除开头的，压入最后
arr.push(arr.shift());
// console.log(arr);
// 重新赋值class
for (var i = 0; i < allLi.length; i ) {
allLi[i].className = arr[i];
}
}
</script>
</body>
</html>
