当前位置：移动技术网 > IT编程>开发语言>JavaScript > ES6实现图片切换特效

ES6实现图片切换特效

2020年01月14日 | 移动技术网IT编程 | 我要评论

效果图

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 === '全部' ? [...this.all] : this.classified[type].map(index => this.all[index]);
    };

  // 生成dom
    img.prototype._createelement = function() {
      // 创建分类按钮
      let typesbtn = [];
      // 遍历分类数组
      for (let type of this.types.values()) {
        typesbtn.push(`
          <li class="__img__classify__type-btn${ type === this.curtype ? ' __img__type-btn-active' : '' }">${ 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="" alt="">
        `;
        // 把遮罩层添加到图片墙中
        methods.appendchild(this.wrap, overlay);
        this.overlay = overlay;
        // 当前要预览的图片
        this.previewimg = methods.$('img', overlay);
        // 移动每张图片到合适的位置
        this._calcposition(this.figures);
      };

  // 获取上一次显示的图片和下一次显示的图片中，相同的图片下标（映射关系）
    img.prototype._diff = function(previmgs, nextimgs) {
      let diffarr = [];//保存两次中相同的数据的下标
      //遍历前一次的所有图片
      //如果在下一次中存在相同的，则获取下标index2
      previmgs.foreach((src1, index1) => {
        let index2 = nextimgs.findindex(src2 => src1 === src2);

        if (index2 !== -1) {
          // 在这个映射数组中存入下标
          diffarr.push([index1, index2]);
        }
      });

      return diffarr;
    };

  // 绑定事件
    img.prototype._bind = function() {
      // 事件代理，点击事件绑定在ul上
        methods.$('.__img__classify', this.wrap).addeventlistener('click', ({ target }) => {

          if (target.nodename !== 'li') return;

          if (!canchange) return;
          canchange = false;

          const type = target.innertext;//获取按钮上的文字（图片类型）
          const els = this._getimgsbytype(type);//获取对应类型的图片

          let previmgs = this.figures.map(figure => methods.$('img', figure).src);//上一次显示的图片数组
          let nextimgs = els.map(figure => methods.$('img', figure).src);//下一次显示的图片数组

          const diffarr = this._diff(previmgs, nextimgs);//获取两次相同图片的映射关系（下标）

          diffarr.foreach(([, i2]) => {
            // 对下一次的所有图片进行遍历
            this.figures.every((figure, index) => {
              let src = methods.$('img', figure).src;
              // 如果下一次的图片在这一次中已经出现过
              if (src === nextimgs[i2]) {
                // 则从所有图片数组中剔除该图片（从index位置，裁剪1个）
                this.figures.splice(index, 1);
                return false;
              }
              return true;
            });
          });
          // 计算图片位置
          this._calcposition(els);

          let needappendels = [];
          if (diffarr.length) {
            // 如果存在相同图片
            let nextelsindex = diffarr.map(([, i2]) => i2);

            els.foreach((figure, index) => {
              // 如果该图片没有出现过，则需要插入
              if (!nextelsindex.includes(index)) needappendels.push(figure);
            });

          } else {
            // 如果不存在相同图片
            needappendels = els;//需要插入的图片=所有图片
          }

          // 上一次的图片全部隐藏掉
          this.figures.foreach(el => {
            el.style.transform = 'scale(0, 0) translate(0%, 100%)';
            el.style.opacity = '0';
          });

          // 把下一次需要显示的图片添加到图片容器中
          methods.appendchild(this.imgcontainer, ...needappendels);

          // 设置下一次显示的动画
          settimeout(() => {
            // els表示所有图片，包括新增的，和上一次已经显示过的
            els.foreach(el => {
              el.style.transform = 'scale(1, 1) translate(0, 0)';
              el.style.opacity = '1';
            });
          });

          // 从dom中销毁上一次出现的图片，将图片数组转为下一次要现实的图片
          settimeout(() => {
            this.figures.foreach(figure => {
              this.imgcontainer.removechild(figure);
            });

            this.figures = els;
            canchange = true;
            // 保证在一次切换动画没有完成之前，拒绝进行下一次切换
            // 避免快速切换
          }, 600);

          // 给图片按钮添加切换时的动画效果
          this.typebtnels.foreach(btn => (btn.classname = '__img__classify__type-btn'));
          target.classname = '__img__classify__type-btn __img__type-btn-active';
        });

      // 事件代理实现点击图片的效果
        this.imgcontainer.addeventlistener('click', ({ target }) => {
          // 如果点击的不是图片或者图片描述，则返回
          if (target.nodename !== 'figure' && target.nodename !== 'figcaption') return;

          // 如果点击的是图片的描述
          // 则把target转为其父元素图片
          if (target.nodename === 'figcaption') {
            target = target.parentnode;
          }

          const src = methods.$('img', target).src;

          // 拿到当前图片索引
          curpreviewimgindex = this.figures.findindex(figure => src === methods.$('img', figure).src);

          this.previewimg.src = src;//把当前图片的src属性赋值给预览图

          this.overlay.style.display = 'flex';//设置遮罩层布局显示

          settimeout(() => {
            this.overlay.style.opacity = '1';//设置遮罩层显示
          });

        });

      // 预览时点击遮罩层，实现预览退出
        this.overlay.addeventlistener('click', () => {
          this.overlay.style.opacity = '0';
          // 箭头函数可以保留最初的this指向
          settimeout(() => {
            this.overlay.style.display = 'none';
          }, 300);
        });

      // 预览点击切换上一张
        methods.$('.__img__overlay-prev-btn', this.overlay).addeventlistener('click', e => {

          e.stoppropagation();//阻止事件冒泡
          // 如果是第一张，上一张就是最后一张
          curpreviewimgindex = curpreviewimgindex === 0 ? this.figures.length - 1 : curpreviewimgindex - 1;
          // 获取到需要上一张显示的图片的src，赋值给预览图的src
          this.previewimg.src = methods.$('img', this.figures[curpreviewimgindex]).src;
        });

      // 预览点击切换下一张
        methods.$('.__img__overlay-next-btn', this.overlay).addeventlistener('click', e => {

          e.stoppropagation();
          // 如果是最后一张，下一张就是第一张
          curpreviewimgindex = curpreviewimgindex === this.figures.length - 1 ? 0 : curpreviewimgindex + 1;
          this.previewimg.src = methods.$('img', this.figures[curpreviewimgindex]).src;
        });

    };

  // 显示元素
    img.prototype._show = function() {
      methods.appendchild(this.parasitifer, this.wrap);

      //设置出现的动画效果
      settimeout(() => {
        this.figures.foreach(figure => {
          figure.style.transform = 'scale(1, 1) translate(0, 0)';
          figure.style.opacity = '1';
        });
      });
    };

  // 计算每张图片所占的位置
    img.prototype._calcposition = function(figures) {
      let horizontalimgindex = 0;

      figures.foreach((figure, index) => {
        figure.style.top = parseint(index / 4) * 140 + parseint(index / 4) * 15 + 'px';
        figure.style.left = horizontalimgindex * 240 + horizontalimgindex * 15 + 'px';
        figure.style.transform = 'scale(0, 0) translate(0, -100%)';
        horizontalimgindex = (horizontalimgindex + 1) % 4;
      });

      let len = math.ceil(figures.length / 4);//总行数
      this.imgcontainer.style.height = len * 140 + (len - 1) * 15 + 'px';//解决绝对定位造成的父容器高度塌陷的问题
    };

  // 把生成的图片墙挂到全局
  window.$img = img;
})(window, document);

data.js

// 图片信息文件
const data = [

  {
    type: 'javascript',
    title: 'es6快速入门',
    alt: 'es6快速入门',
    src: './assets/images/1.jpg'
  },

  {
    type: 'javascript',
    title: 'javascript实现二叉树算法',
    alt: 'javascript实现二叉树算法',
    src: './assets/images/2.jpg'
  },

  {
    type: 'javascript',
    title: 'canvas绘制时钟',
    alt: 'canvas绘制时钟',
    src: './assets/images/3.jpg'
  },

  {
    type: 'javascript',
    title: '基于websocket的火拼俄罗斯',
    alt: '基于websocket的火拼俄罗斯',
    src: './assets/images/15.jpg'
  },

  {
    type: '前端框架',
    title: 'react知识点综合运用实例',
    alt: 'react知识点综合运用实例',
    src: './assets/images/4.jpg'
  },

  {
    type: '前端框架',
    title: 'react组件',
    alt: 'react组件',
    src: './assets/images/5.jpg'
  },

  {
    type: '前端框架',
    title: 'vue+webpack打造todo应用',
    alt: 'vue+webpack打造todo应用',
    src: './assets/images/6.jpg'
  },

  {
    type: '前端框架',
    title: 'vue.js入门基础',
    alt: 'vue.js入门基础',
    src: './assets/images/7.jpg'
  },

  {
    type: '前端框架',
    title: '使用vue2.0实现购物车和地址选配功能',
    alt: '使用vue2.0实现购物车和地址选配功能',
    src: './assets/images/8.jpg'
  },

  {
    type: 'react',
    title: 'react知识点综合运用实例',
    alt: 'react知识点综合运用实例',
    src: './assets/images/4.jpg'
  },

  {
    type: 'react',
    title: 'react组件',
    alt: 'react组件',
    src: './assets/images/5.jpg'
  },

  {
    type: 'vue.js',
    title: 'vue+webpack打造todo应用',
    alt: 'vue+webpack打造todo应用',
    src: './assets/images/6.jpg'
  },

  {
    type: 'vue.js',
    title: 'vue.js入门基础',
    alt: 'vue.js入门基础',
    src: './assets/images/7.jpg'
  },

  {
    type: 'vue.js',
    title: '使用vue2.0实现购物车和地址选配功能',
    alt: '使用vue2.0实现购物车和地址选配功能',
    src: './assets/images/8.jpg'
  }

]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

小白测试系列:badboy默认浏览器修改

badboy使用的浏览器为系统默认浏览器，如果需要更换浏览器，直接修改系统默认浏览器即可，这里推荐用最liuma... [阅读全文]
nginx网站安全漏洞修复

前言：公司项目交付之前甲方进行了安全漏洞的扫描。大部分漏洞都是因为nginx响应没有加上仿攻击的响应头。记录一下... [阅读全文]
信息收集--绕过CDN寻找真实IP

0x01 验证目标是否存在CDN1、使用世界各地ping服务，如果地址不唯一，多半是用了CDN下例是我常使用的在... [阅读全文]
TCP和UDP的优缺点及区别

TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有... [阅读全文]
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例

以vs2012为标准。转自：http://technet.microsoft.com/zh-cn/library... [阅读全文]
CTF 刷题记录（一）白云新闻搜索（手动与自动化SQL注入）

题目给出的靶机如下：解题思路首先判断这是考察哪个知识点，只有一个输入框，题目中又说到入侵，首先考虑sql注入，下... [阅读全文]
Node.js 深度调试方法解析

在 node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。node(v6.3+)集成了方便好用 v8 inspect 调... [阅读全文]
javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名1.最初的样子如下2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下3.点击停止点... [阅读全文]
从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了javascript编写贪吃蛇游戏的具体代码，供大家参考，具体内容如下游戏截图1.画出游戏界面var c=document.geteleme... [阅读全文]
js编写简易的计算器

本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下使用绑定时间触发加减乘除加：减：乘：除：源代码：<body> 第一个数... [阅读全文]

网友评论


验证码：

ES6实现图片切换特效

2020年01月14日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论