# # 动态替换图片

## # 最简单的示例

    <div class="img-wrapper">
        <div onclick='replacement'>
            <img src='[图片1]' >
        </div>
        <!----------------->
        <!--忽略同类型代码.-->
        <!----------------->
        <div onclick='replacement'>
            <img src='[图片10]'>
        </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11

    .img-wrapper {
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
    }
    .img-wrapper > div {
      flex: 0 0 100px;
      border: 1px solid;
    }

    img {
      width: 100%;
      height: 100%;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

    // 定义图片源数据
    let imgs = [
      '[图片1]',
      //---------------//
      // 忽略同类型代码. //
      //---------------//
      '[图片2]',
    ];
    function replacement() {
      // 获取img-wrapper下的所有子节点
      let imgWrapper = document.getElementsByClassName('img-wrapper').childNodes;
      //设置其他img图像为正常显示
      for (let i = 0; i < imgWrapper.length; i++) {
        imgWrapper[i].children[0].src = imgs[i];
      }
      // 设置被点击元素的图像
      this.children[0].src = '[需要展示的图片链接]';
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

## # 稍微复杂一点

通多`js`去创建重复的`div`布局.并设置样式.最后结果同上.

但是这个例子没有做需要做循环的元素总量达到 100 或是更高数量的性能优化.

    <div id="imgWrapper"></div>

1

    #imgWrapper {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
    }

    #imgWrapper > div {
      flex: 0 0 200px;
    }

    #imgWrapper > div > img {
      display: block;
      width: 100%;
      height: auto;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    window.onload = () => {
      let imgWrapper = document.getElementById('imgWrapper'); // 待插入元素的总容器
      // 通过 for 循环语句,创建示例元素
      for (let i = 0; i < 10; i++) {
        let newNode = document.createElement('div'); // 自定义需要插入图片的容器
        let newNodeImage = document.createElement('img'); // 自定义图片容器
        // 由于图片名字的格式为  01.png
        // 所以需要通过自定义 的 indexSrc 方法,转换 i 为符合要求的格式
        let index = indexSrc(j);
        // 下面是 div img 的组装了.
        newNodeImage.src = `./images/${index}.png`;
        newNode.appendChild(newNodeImage);
        imgWrapper.appendChild(newNode);
      }
      // 通过 for 循环语句,给每个 img 的父元素添加点击事件,改变元素内部的 img 的 src 属性
      for (let i = 0; i < imgWrapper.children.length; i++) {
        imgWrapper.children[i].addEventListener('click', function() {
          for (let j = 0; j < imgWrapper.children.length; j++) {
            let index = indexSrc(j); // 同上
            imgWrapper.children[j].children[0].src = `./images/${index}.png`;
          }
          this.children[0].src = './images/qq.png';
        });
      }
      function indexSrc(index) {
        // 这里涉及到 + 的优先级. 过程是  index 先同  1 相加,然会再去同 为空的 '' 相加
        index = '' + index + 1;
        if (index.length < 2) {
          index = '0' + index;
        }
        return index;
      }
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

## # 更新说明:

下面的内容部分还有函数部分,写的一团糟糕.建议不要做浏览(由于是第一篇博文,所以做保留处理).
所以我写了一个最简单的示例.看上面部分即可.

## # 目的：

在制作个人网站的时候，我需要在 header 里面加入各大社交网站的直链，可以让更多人，找到我，提供他们的想法。并且去实现那个想法。

## # 展现方式：

是以一种点击图标的的形式，展示不同社交网站的二维码或者是链接。在开发过程中遇到很多有意思的坑，想分享给大家，希望可以给看到本文的小伙伴提供点帮助。

## # 使用技巧

由于在一开始，我们就用了多个程序来进行区分不同事件点击之后，显示不同的图片的功能。但是在一段时间之后发现这样子的代码谈不上什么有价值的，所以我重新花了点时间，把代码重新架构了一番。清理了冗余代码，同时也把程序优化了。 优化之后的程序只要将植入代码，就可以实现简单的点击不同按钮,相同位置展示不同图片功能。

## # 项目结构：

    ├──index             // 示例 index
    │   ├──js
    │   │   └──index.js
    │   ├──css
    │   │   └──index.js

1
2
3
4
5

## # index.html 详解

首先页面 header 排版，设置具体结构

    ├── div            // 示例 header
    │   ├── div
    │   │   └── img
    │   │   └── img
    │   │   └── img

1
2
3
4
5

在每个 img 中添加 onclick="hImage()"属性，并给每个"hImage()"中加入"1-3"值；设置这个值，是为了在 index.js 的 hImage()函数中做出对应的判断。

    <img class="h-image" onclick="hImage(1)" width="50" height="25" alt="图标1" title="1">

1

    <!--主框架-->
    <div class="h-box">
        <div style="color: #fff;text-align: center">
            <img class="h-image" onclick="hImage(1)" width="50" height="25" alt="图标1" title="1">
            <img class="h-image" onclick="hImage(2)" width="50" height="25" alt="图标2" title="2">
            <img class="h-image" onclick="hImage(3)" width="50" height="25" alt="图标3" title="3">
        </div>
    </div>

1
2
3
4
5
6
7
8

## # 模态框

    ├── div            // 示例 模态框
    │   ├── div
    │   │   └── div
    │   │   └── img
    │   │   └── h1

1
2
3
4
5

第一层 div 设置模态框显示之后的透明色背景。 第二层 div 主要是做模态框显示之后的内容的框架 第二层 div 下面的 div 是关闭模态框按钮。里面加入 onclick="hShow()" 函数，该函数负责关闭模态框

    <div onclick="hShow()">×</div>

1

第二层 div 下面的 img 则是展示不同图标点击之后，显示的二维码 第二层 div 下面的 h1 则是展示不同图标点击之后，显示的提示信息 这里的模态框设置 使用 position 中的 fixed，来设置模态框的位置与样式。同

    <!--模板-->
    <div class="h-module">
        <!--放置二维码图片-->
        <div>
            <!--设置模态框关闭按钮-->
            <div onclick="hShow()">×</div>
            <!--图片放置路径-->
            <img id="hhtImg" src="" alt="">
            <h1 id="hText"></h1>
        </div>
    </div>

1
2
3
4
5
6
7
8
9
10
11

## # index.js 详解

    var hModule = document.getElementsByClassName('h-module'); //获取模态框中的关闭按钮属性
    var hhtImg = document.getElementById('hhtImg'); //设置模态框不同位置按钮点击之后展示的属性图片属性
    var hText = document.getElementById('hText'); //设置模态框显示之后的提示信息
    /*hImage函数
     * 由于图片只有一张，所以同时设置title属性以示区分
     * 通过 switch语句判断点击不同按钮，
     * 在模态框展示不同的图片。
     */
    function hImage(e) {
      console.log();
      switch (e) {
        case 1:
          //hhtImg.src为设置需要展示的图片的地址
          hhtImg.src =
            'http://oigzh9iic.bkt.clouddn.com/%E4%BA%AB%E6%9C%88%E4%BC%9A%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg';
          hhtImg.title = '这里是' + e; //此处设置鼠标悬浮于图片时显示的文字
          hText.innerHTML = '这里是二维码' + e; //此出设置模态框显示之后，展示提示文字的内容
          break;
        case 2:
          hhtImg.src =
            'http://oigzh9iic.bkt.clouddn.com/%E4%BA%AB%E6%9C%88%E4%BC%9A%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg';
          hhtImg.title = '这里是' + e;
          hText.innerHTML = '这里是二维码' + e;
          break;
        case 3:
          hhtImg.src =
            'http://oigzh9iic.bkt.clouddn.com/%E4%BA%AB%E6%9C%88%E4%BC%9A%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg';
          hhtImg.title = '这里是' + e;
          hText.innerHTML = '这里是二维码' + e;
          break;
      }
      hModule[0].style.display = 'block';
    }
    /*hShow函数
     * 功能：关闭模态框；
     * 由于原生js中，获取参数的值
     * 之后，其属性为数组形式；
     * 需要设置下标，再去设置style属性，
     * 或者是其他属性
     * */
    function hShow() {
      hModule[0].style.display = 'none';
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43