JS实现百叶窗特效-阿里云开发者社区

JS实现百叶窗特效

2022-09-21 24

简介： 👀每天实习一个小案例，编程能力才会突飞猛进。

+关注继续查看

🍇效果展示

图片.png

🍈实现过程

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>面包片</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <!-- 轮播图的容器 -->
    <!-- 里面的内容通过 js 动态来生成 -->
    <ul id="wrap" class="wrap"></ul>
    <!-- 下方的按钮组 -->
    <ul id="btn" class="btn-grounp">
        <li data-id="0" class="active"></li>
        <li data-id="1"></li>
        <li data-id="2"></li>
        <li data-id="3"></li>
    </ul>
    <script src="./index.js"></script>
  </body>
</html>

css

* {
    /* 去除内外边距 */
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.wrap {
    width: 800px;
    height: 450px;
    /* border: 1px solid; */
    margin: 100px auto 20px;
    transform-style: preserve-3d;
    perspective: 1500px;
}
/* 接下来我们来书写按钮组的样式 */
.btn-grounp {
    width: 500px;
    height: 8px;
    /* border: 1px solid; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.btn-grounp li {
    width: 100px;
    height: 100%;
    /* border: 1px solid; */
    /* float: left;
    margin-right: 20px; */
    border-radius: 10px;
    background-color: #999;
    cursor: pointer;
}
li.active {
    background-color: rgb(229, 90, 90);
}
/* 接下来继续来设置 wrap 里面 li 相关的样式 */
.wrap li{
    width: 40px;
    height: 100%;
    /* outline:1px solid; */
    float: left;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center -225px;
}
.wrap li span{
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0;
    top: 0;
}
/* 每个 li 下面的第一个 span */
/* 正面图片 */
.wrap li span:nth-child(1){
    background: url("./img/002.jpeg") no-repeat;
}
/* 上面图片 */
.wrap li span:nth-child(2){
    background: url("./img/003.jpeg") no-repeat;
    transform:rotateX(90deg);
    top: -100%;
    transform-origin: bottom;
}
/* 背面和下面同理 */
/* 背面 */
.wrap li span:nth-child(3){
    background: url("./img/2.jpeg") no-repeat;
    transform:translateZ(-450px) rotateX(180deg);
}
.wrap li span:nth-child(4) {
    background: url("./img/14.jpeg") no-repeat;
    top: 100%;
    transform:rotateX(-90deg);
    transform-origin: top;
}

js

// 接下来我们来通过 js 动态的生成 wrap 里面的 20 个 li
 
var wrap = document.getElementById("wrap");
 
// 计算 li 的数量
var liLength = 20;
 
// 接下来我们就来做初始化操作
for (var i = 0; i < liLength; i++) {
  wrap.innerHTML += `<li style="transition:.8s ${i*50}ms">
        <span style="background-position:${-i * 40}px 0"></span>
        <span style="background-position:${-i * 40}px 0"></span>
        <span style="background-position:${-i * 40}px 0"></span>
        <span style="background-position:${-i * 40}px 0"></span>
    </li>`;
}
 
var btnGrounp = document.getElementById("btn");
 
btnGrounp.onclick = function (e) {
  // 用户点击的按钮的索引
  var index = e.target.dataset.id;
  var lis = wrap.children; // 获取 wrap 下面所有的 li
  console.log(lis);
  for (var i = 0; i < liLength; i++) {
    lis[i].style.transform = `rotateX(${index * -90}deg)`;
  }
 
  var btns = btnGrounp.children; // 获取所有的按钮
  // 来处理按钮
  // 用户点击哪个按钮，就让哪个按钮挂上 active 这个类
  for(var i=0;i<btns.length;i++){
    btns[i].className = "";
  }
  btns[index].className = "active";
};

html、css、js有不清楚的地方可以去看一下我之前讲解的专栏~~~。