ES6实现图片切换特效代码

网络编程 2024/12/24 佚名

3 1 2

效果图

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    let arr = ["前端", "jquery", "javascript", "html", "css"];
    //补充代码
    let lis='';
    let ul = document.createElement('ul');
    function appendHTML( ...innerhtml){
      innerhtml.forEach(el => {
        let templates = `<li>`+el+`</li>`;
        lis+=templates;
       });
      return lis;
    }
    appendHTML(...arr);
    ul.innerHTML=lis;
    document.body.appendChild(ul);
  </script>
</body>
</html>

style.css

* {
 margin: 0;
 padding: 0;
}

body {
 background: #fafafa;
 background: url('../images/bg.png')
}

::-webkit-scrollbar {
 display: none;
}

#wrap {
 width: 1065px;
 padding-top: 50px;
 margin: 0 auto;
 padding: 30px;
 background: rgb(255, 255, 255);
 border-radius: 2px;
 margin-top: 100px;
}

/* 整体容器 */
.__Img__container {
 font-size: 10px;
}

/* 分类容器 */
.__Img__container .__Img__classify {
 /* text-align: center; */
}

/* 分类按钮 */
.__Img__container .__Img__classify .__Img__classify__type-btn {
 display: inline-block;
 padding: .2em 1em;
 font-size: 1.6em;
 margin-right: 10px;
 cursor: pointer;
 border: 1px solid #e95a44;
 outline: none;
 color: #e95a44;
 transition: all .4s;
 user-select: none;
 border-radius: 2px;
}

/* 激活状态的分类按钮 */
.__Img__container .__Img__classify .__Img__classify__type-btn.__Img__type-btn-active {
 background: #e95a44;
 /* border: 1px solid #9b59b6; */
 color: #fff;
}

/* 所有图片容器 */
.__Img__container .__Img__img-container {
 position: relative;
 margin-top: 30px;
 width: 1005px;
 display: flex;
 flex-wrap: wrap;
 transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 单个图片容器 */
.__Img__container .__Img__img-container figure {
 width: 240px;
 height: 140px;
 position: absolute;
 transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
 transform: scale(0, 0);
 opacity: 0;
 overflow: hidden;
 border-radius: 2px;
 user-select: none;
}

/* 伪元素遮罩层 */
.__Img__container .__Img__img-container figure::before {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 4;
 background: rgba(58, 12, 5, 0.5);
 content: ' ';
 font-size: 0;
 opacity: 0;
 transition: all .3s;
 cursor: pointer;
}

/* 图片 */
.__Img__container .__Img__img-container figure img {
 display: block;
 width: 100%;
 height: 100%;
 transition: all .3s;
}

/* 图片标题 */
.__Img__container .__Img__img-container figure figcaption {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 7;
 opacity: 0;
 font-size: 1.5em;
 color: rgb(255, 255, 255);
 transform: translate(-50%, -50%);
 transition: all .3s;
 text-align: center;
 cursor: pointer;
}

/* 悬停图片的时候标题显示 */
.__Img__container .__Img__img-container figure:hover figcaption {
 opacity: 1;
}

.__Img__container .__Img__img-container figure:hover img {
 transform: scale(1.1, 1.1);
}

/* 悬停图片的时候遮罩显示 */
.__Img__container .__Img__img-container figure:hover::before {
 opacity: 1;
}

.__Img__overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, .8);
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 0;
 transition: all .3s;
 display: none;
}

.__Img__overlay .__Img__overlay-prev-btn,
.__Img__overlay .__Img__overlay-next-btn {
 position: absolute;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 border: 2px solid white;
 text-align: center;
 line-height: 50px;
 color: white;
 font-size: 2rem;
 cursor: pointer;
}

.__Img__overlay .__Img__overlay-prev-btn {
 left: 20px;
}

.__Img__overlay .__Img__overlay-next-btn {
 right: 20px;
}

.__Img__overlay .__Img__overlay-prev-btn:active,
.__Img__overlay .__Img__overlay-next-btn:active {
 background: rgb(241, 241, 241, .4);
}

.__Img__overlay .__Img__overlay-next-btn::after {
 content: "N";
}

.__Img__overlay .__Img__overlay-prev-btn::after {
 content: "P";
}

.__Img__overlay img {
 transform: scale(2, 2);
}

index.js


// 1. 对图片进行分类
// 2. 生成dom元素
// 3. 绑定事件
// 4. 显示到页面上

// 以插件形式完成
(function (window, document) {
 let canChange = true;
 let curPreviewImgIndex = 0;

 // 公共方法集合
  const methods = {
   // 以数组形式添加子元素
   appendChild(parent, ...children) {
    children.forEach(el => {
     parent.appendChild(el);
    });
   },
   // 选择器
   $(selector, root = document) {
    return root.querySelector(selector);
   },
   // 选择多个元素
   $$(selector, root = document) {
    return root.querySelectorAll(selector);
   }
  };

 // 构造函数
  let Img = function(options) {
   // 初始化
    this._init(options);
   // 生成DOM元素
    this._createElement();
   // 绑定事件
    this._bind();
   // 显示到页面上
    this._show();
  }

 // 初始化
  Img.prototype._init = function({ data, initType, parasitifer }) {
   this.types = ['全部']; // 所有的分类
   this.all = []; // 所有图片元素
   this.classified = {'全部': []}; // 按照类型分类后的图片
   this.curType = initType; // 当前显示的图片分类
   this.parasitifer = methods.$(parasitifer); // 挂载点

   this.imgContainer = null; // 所有图片的容器
   this.wrap = null; // 整体容器
   this.typeBtnEls = null; // 所有分类按钮组成的数组
   this.figures = null; // 所有当前显示的图片组成的数组
   // 对图片进行分类
   this._classify(data);

   //console.log(this.classified);//分类的结果
  };

 // 对图片进行分类
  Img.prototype._classify = function(data) {
   let srcs = [];
   // 解构赋值，获取每张图片的四个信息
   data.forEach(({ title, type, alt, src }) => {
    // 如果分类中没有当前图片的分类，则在全部分类的数组中新增该分类
    if (!this.types.includes(type)) {
     this.types.push(type);
    }
    // 判断按照类型分类后的图片中有没有当前类型
    if (!Object.keys(this.classified).includes(type)) {
     this.classified[type] = [];
    }
    // 判断当前图片是否已生成
    if (!srcs.includes(src)) {
     // 如果图片没有生成过，则生成图片，并添加到对应的分类中
     srcs.push(src);

     let figure = document.createElement('figure');
     let img = document.createElement('img');
     let figcaption = document.createElement('figcaption');

     img.src = src;
     img.setAttribute('alt', alt);
     figcaption.innerText = title;
     // 在figure中添加img和figcaption
     methods.appendChild(figure, img, figcaption);
     // 将生成的figure添加到all数组中
     this.all.push(figure);
     // 新增的这个图片会在all数组中的最后一个元素
     this.classified[type].push(this.all.length - 1);

    } else {
     // 去all中 找到对应的图片
     // 添加到 对应的分类中
     this.classified[type].push(srcs.findIndex(s1 => s1 === src));
    }

   });

  };

 // 根据分类获取图片
  Img.prototype._getImgsByType = function(type) {
   // 如果分类是全部，就返回所有图片
   // 否则，通过map进行遍历，根据分类来获取图片数组
   return type === '全部' "__Img__classify__type-btn${ type === this.curType ">${ type }</li>
    `);
   }

   //console.log(typesBtn);//查看所有分类按钮
   
   // 整体的模版
    let tamplate = `
     <ul class="__Img__classify">
      ${ typesBtn.join('') }
     </ul>
     <div class="__Img__img-container"></div>
    `;

    let wrap = document.createElement('div');
    wrap.className = '__Img__container';

    wrap.innerHTML = tamplate;//生成整体元素
    //取得所有图片的容器
    this.imgContainer = methods.$('.__Img__img-container', wrap);
    //查看当前分类下的图片
    console.log(this._getImgsByType(this.curType));
    // 把当前分类下的图片数组，插入到图片容器里
    methods.appendChild(this.imgContainer, ...this._getImgsByType(this.curType));

    //把可能有用的数据先挂到指定位置
    this.wrap = wrap;
    this.typeBtnEls = [...methods.$$('.__Img__classify__type-btn', wrap)];
    this.figures = [...methods.$$('figure', wrap)];

    // 遮罩层
    let overlay = document.createElement('div');
    overlay.className = '__Img__overlay';
    overlay.innerHTML = `
     <div class="__Img__overlay-prev-btn"></div>
     <div class="__Img__overlay-next-btn"></div>
     <img src="/UploadFiles/2021-04-02/">总结
以上所述是小编给大家介绍的ES6实现图片切换特效代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

ES6实现图片切换特效,es6,图片切换

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“ES6实现图片切换特效代码”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

ES6实现图片切换特效代码

小程序中设置缓存过期的实现方法

vue项目创建步骤及路由router

评论“ES6实现图片切换特效代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接