开发者社区> 亦世凡华、> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JS实现百叶窗特效

简介: 👀每天实习一个小案例,编程能力才会突飞猛进。
+关注继续查看

🍇效果展示

图片.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有不清楚的地方可以去看一下我之前讲解的专栏~~~。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
那些带给我们强烈视觉冲击的 JavaScript 特效网站
  关于 HTML5 和  Flash 之间的战争,网上讨论的文章很多很多,尽管 HTML5 还有很长的路要走,但 Flash 正在走下坡路是不争的事实。以前效果精美的 Flash 网站非常流行,如今已经很少见到了。
526 0
Javascript特效实现鼠标移动到小图,查看大图效果;
首先感谢“杨中科”老师,免费发布教学视频; 老规矩,先上传图片素材;一共六张图片,三大,三小(大的图片大家可以把他下载下来,当成手机屏保哦,由于图片太大,我只让他显示200*300了)。   小图片都是通过document.
576 0
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
0 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
0 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
0 0
JS中实现或退出全屏
JS中实现或退出全屏
0 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
0 0
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
0 0
+关注
亦世凡华、
在校大学生,涉及前端开发,Python,java,web安全相关爱好,努力成为一名优质的阿里云原创作者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载