思路:
先搭出一个长方体,然后把这个长长方体切割成很多个li,然后每个li都有四个面(用div表示),然后利用background-position-x
属性将图片平移不同的距离从而拼凑成一张完整的图片,然后将每个li的旋转时间都设定成不同的额,就形成了波浪翻转的效果
1.document.querySelectorAll()
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。
NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始。
2.window.getComputedStyle
getComputedStyle() 方法用于获取指定元素的 CSS 样式。
获取的样式是元素在浏览器中最终渲染效果的样式。
语法
window.getComputedStyle(element, pseudoElement)
参数说明:
- element: 必需,要获取样式的元素。
- pseudoElement: 可选,伪类元素,当不查询伪类元素的时候可以忽略或者传入 null。
3.transform-origin
这个是表示旋转的旋转点,关于这个有一篇挺好的文章可以看一下:transform-origin
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0px;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.solid {
width: 800px;
height: 360px;
margin: 150px auto;
box-shadow: 1px 7px 25px #fd8fd9;
}
.solid ul {
height: 100%;
z-index: 1;
}
.solid ul li {
position: relative;
float: left;
transform-style: preserve-3d;
width: 8px;
height: 100%;
}
.solid ul li div {
position: absolute;
width: 100%;
height: 100%;
}
.solid ul li div:nth-child(1) {
background: url('./image/1.jpg');
transform:rotateX(90deg) translateZ(180px) ;
}
.solid ul li div:nth-child(2) {
background: url('./image/2.jpg');
transform: rotateX(-90deg) translateZ(180px);
}
.solid ul li div:nth-child(3) {
background: url('./image/3.jpg');
transform: translateZ(180px);
}
.solid ul li div:nth-child(4) {
background: url('./image/4.jpg');
transform: translateZ(-180px) rotateX(180deg);
}
.solid ol{
z-index: 9999;
margin:5px auto;
width: 50%;
display: -webkit-flex;
display: flex;
justify-content: space-between;
height: 50px;
}
.solid ol li{
float: left;
width: 25px;
height: 25px;
background-color: gray;
text-align: center;
border-radius: 50%;
}
.solid ol li:hover{
cursor: pointer;
box-shadow: 2px 2px 5px;
}
.solid ol li.on{
background-color: red;
}
</style>
<body>
<div class="solid">
<ul class="oUl">
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
<script src="demo.js"></script>
</html>
//创建元素
var solid = document.getElementsByClassName("solid")[0];
var oUl = document.getElementsByClassName("oUl")[0];
var css = document.getElementsByTagName("style")[0];
var n;
var btn = document.querySelectorAll('ol li');//选择
createDom();
function createDom() {
var len = 100;//创建100个li
var uHtml = "";
var pHtml = "", tHtml = "";
var allWidth = parseInt(window.getComputedStyle(solid, null).width);//计算总的宽度
var widthLi = allWidth / len;
for (var i = 0; i < len; i++) {
uHtml += "<li><div></div><div></div><div></div><div></div></li>";
pHtml += '.solid ul li:nth-child(' + (i + 1) + ') div{background-position-x:' + (-i * widthLi) + 'px;background-size: cover;}';
tHtml+='.solid ul li:nth-child(' + (i + 1) + '){transition:'+(0.8+0.3*i/len)+'s;}';
}
oUl.innerHTML = uHtml;
css.innerHTML += pHtml;
css.innerHTML+=tHtml;
bindEvent();
play();
}
function bindEvent() {
for (var i = 0; i < 4; i++) {
btn[i].index = i;
btn[i].onclick = function () {
n = this.index;
for (var i = 0; i < 4; i++) {//x先将所有序号的class清空
btn[i].className = '';
}
this.className = 'on';
css.innerHTML += '.solid ul li{transform:rotateX(' + n * 90 + 'deg)}';
}
}
}