PC 端网页特效

灰太狼 2023-09-26 09:55 87阅读 0赞

#### 文章目录 ####

*   *  一、offset 系列
     *   *  1.offset 常见属性
         *  2.offset 与 style 区别
         *  3.鼠标在盒子内的坐标
         *  4.登录界面模态框拖拽
         *  5.仿京东放大镜效果
     *  二、client 系列
     *   *  1.立即执行函数
         *  2.flexible.js 源码
     *  三、scroll 系列
     *   *  1.固定侧边栏
     *  四、动画函数
     *   *  1.动画实现原理
         *  2.动画函数封装
         *  3.缓动动画实现
         *  4.添加回调函数
         *  5.动画函数使用

### 一、offset 系列 ###

#### 1.offset 常见属性 ####

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以**动态的**得到该元素的位置、大小等。

> ① 获得元素距离带有定位的父元素的位置；  
> ② 获得元素自身的大小；  
> ③ 返回的宽度和高度是包含 padding 和 border 的；  
> ④ element.offsetParent 和 element.parentNode 返回的都是父元素，它们的不同点是，前者父元素必须有定位，而后者返回的是最近一级的父元素，不管有没有定位；  
> ⑤ 注意返回的数值都不带单位。

![在这里插入图片描述][fe7667f9b9b44671bccb566fcf75d797.png_pic_center]

#### 2.offset 与 style 区别 ####

**① offset**  
（1）offset 可以得到任意样式表中的样式值；  
（2）offset 系列获得的数值是没有单位的；  
（3）offsetWidth 包含 padding + border + width；  
（4）offsetWidth 等属性是只读属性，只能获取不能修改值。

**② style**  
（1）style 只能得到行内样式表中的样式值；  
（2）style.width 获得的是带有单位的字符串；  
（3）style.width 获得不包含 padding 和 border 的值；  
（4）style.width 是可读写属性，赋值对于任意样式表都可以，但是如果要获取样式值就必须是行内样式表。

`综上，获取元素的值用 offset 更合适，如果给元素更改值需要使用 style！`

#### 3.鼠标在盒子内的坐标 ####

案例分析：  
① 在盒子内点击，想要得到鼠标距离盒子左边和上边的距离。  
② 首先得到鼠标在页面中的坐标（e.pageX，e.pageY）。  
③ 其次得到盒子在页面中的坐标（box.offsetLeft，box.offsetTop）。  
④ 用鼠标在页面中的坐标减去盒子在页面中的坐标，得到的就是鼠标在盒子中的坐标。  
⑤ 如果想要移动一下鼠标，就要获取到最新的坐标，可以使用鼠标移动事件 mousemove。

<!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>Document</title>
        <style>
            div {
          
                width: 340px;
                height: 340px;
                background-color: black;
                color: aliceblue;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
       <div></div>
       <script>
           var div = document.querySelector('div');
           div.addEventListener('mousemove', function(e) {
          
           var x = e.pageX - this.offsetLeft;
           var y = e.pageY - this.offsetTop;
           this.innerHTML = 'x坐标是：' + x + '，y坐标是：' + y;
           })
       </script>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][614f57c8ec684f14bc0fba1e46189c9c.png_pic_center]

#### 4.登录界面模态框拖拽 ####

案例分析：  
① 弹出框我们也称为模态框。  
② 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层，display: block 。  
③ 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层，display: block 。  
④ 鼠标放到模态框最上面一行，可以按住鼠标拖动模态框，使其可以在页面中移动。  
⑤ 鼠标松开，可以停止移动模态框。  
⑥ 触发事件是鼠标按下 mousedown、鼠标移动 mousemove 以及鼠标松开 mouseup。  
⑦ 核心原理，用鼠标的坐标减去鼠标在盒子内的坐标，才是模态框真正的坐标。  
⑧ 拖拽过程，鼠标移动的过程中，将获得的最新值赋给模态框的 left 和 top，这样模态框就可以跟着鼠标移动了。

<!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>Document</title>
        <style>
            * {
          
                margin: 0;
                padding: 0;
            }
            .header {
          
                position: relative;
                width: 600px;
                height: 70px;
                font-size: 36px;
                font-weight: 600;
                text-align: center;
                line-height: 70px;
                margin: 45px auto;
                z-index: 2;
            }
            .login-bg {
          
                display: none;
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                background-color: darkgrey;
            }
            a {
          
                display: inline-block;
                text-decoration: none;
                color: black;
            }
            .login {
          
                display: none;
                position: fixed;
                width: 540px;
                height: 298px;
                left: 50%;
                top: 50%;
                z-index: 999;
                background-color: white;
                transform: translate(-50%, -50%);
            }
            .login-title {
          
                position: relative;
                top: 4px;
                width: 100%;
                height: 62px;
                font-size: 22px;
                font-weight: 300;
                line-height: 62px;
                text-align: center;
                color: black;
            }
            .login-close {
          
                position: absolute;
                width: 46px;
                height: 46px;
                font-size: 14px;
                line-height: 46px;
                border-radius: 50%;
                top: -23px;
                right: -23px;
                background-color: rgb(227, 157, 157);
            }
            .login-close:hover {
          
                background-color: rgb(226, 131, 131);
            }
            .login-content {
          
                position: relative;
                margin: 0;
                width: 100%;
                height: 100px;
                font-size: 17px;
                text-align: center;
            } 
            input {
          
                width: 370px;
                height: 32px;
                outline: none;
                border: 1px solid rgb(227, 224, 224);
                margin: 10px auto;
                color: black;
            }
            ::-webkit-input-placeholder {
          
                color: #ccc;
                font-size: 14px;
            }
            .login-button {
          
                width: 300px;
                margin: 30px auto;
            }
            button {
          
                width: 300px;
                height: 36px;
                font-size: 17px;
                color: black;
                background-color: white;
                border: 1px solid rgb(227, 224, 224);
            }
            button:hover {
          
                background-color: rgb(227, 157, 157);
            }
        </style>
    </head>
    <body>
        <div class="header"><a href="#" id="link">点击，弹出登录框</a></div>
        <div class="login">
            <div class="login-title">
                登录会员
                <a href="#" class="login-close">关 闭</a>
            </div>
            <div class="login-content">
                <div>
                    <label>账号：</label>
                    <input type="text" name="usernames" class="username" placeholder="请输入用户名"/>
                </div>
                <div>
                    <label>密码：</label>
                    <input type="password" name="passwords" class="password" placeholder="请输入登录密码"/>
                </div>
            </div>
            <div class="login-button">
                <button>登录</button>
            </div>
        </div>
        <div class="login-bg"></div>
        <script>
            var link = document.getElementById('link');
            var bg = document.querySelector('.login-bg');
            var login = document.querySelector('.login');
            var title = document.querySelector('.login-title');
            var close = document.querySelector('.login-close');
            link.addEventListener('click', function() {
          
                bg.style.display = 'block';
                login.style.display = 'block';
            })
            close.addEventListener('click',function() {
          
                bg.style.display = 'none';
                login.style.display = 'none';
            })
            title.addEventListener('mousedown',function(e) {
          
                x = e.pageX - login.offsetLeft;
                y = e.pageY - login.offsetTop;
                document.addEventListener('mousemove', move);
                function move(e) {
          
                    login.style.left = e.pageX - x + 'px';
                    login.style.top = e.pageY - y + 'px';
                }
                document.addEventListener('mouseup', function() {
          
                    document.removeEventListener('mousemove', move);
                })
            })
        </script>
    </body>
    </html>

运行结果：

![在这里插入图片描述][e8e69e3ed3e744ae89c640281d897df2.png_pic_center]

#### 5.仿京东放大镜效果 ####

案例分析：  
① 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示出来，鼠标离开则隐藏。  
② 黄色的遮挡层跟随鼠标移动。  
③ 移动黄色遮挡层，大图片跟着移动。  
④ 把鼠标坐标直接给遮挡层显然是不合适的，因为遮挡层 mask 的坐标以父盒子为准。  
⑤ 应该获得鼠标在盒子内的坐标，之后把数值给遮挡层的 left 和 top。  
⑥ 遮挡层的最大移动距离，用小图片盒子的宽度减去遮挡层盒子的宽度。  
⑦ 遮挡层移动的距离与放大镜里面大图片移动的距离存在倍数关系，此倍数与这两张图片的大小有关系，这里以2倍为例。

<!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">
        <script src="测试.js"></script>
        <title>Document</title>
        <style>
            .small {
          
                position: relative;
                left: 0;
                top: 0;
                width: 285px;
                height: 428px;
            }
            .big {
          
                display: none;
                position: absolute;
                width: 180px;
                height: 180px;
                top: 100px;
                left: 450px;
                overflow: hidden;
            }
            #bigimg {
          
                position: absolute;
                left: 0;
                top: 0;
                width: 570px;
                height: 856px;
            }
            .mask {
          
                display: none;
                position: absolute;
                width: 140px;
                height: 140px;
                top: 0;
                left: 0;
                background-color: rgb(232, 232, 75);
                opacity: 0.6;
                cursor: move;
            }
        </style>
    </head>
    <body>
            <div class="small">
            <img src="picture.jpg"/>
            <div class="mask"></div>
            </div> 
            <div class="big">
                <img src="big.jpg" id="bigimg"/>
            </div>
    </body>
    </html>

//JS文档
    window.addEventListener('load', function() {
        
        var small = document.querySelector('.small');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        var bigimg = this.document.querySelector('#bigimg');
        small.addEventListener('mouseover', function() {
        
            mask.style.display = 'block';
            big.style.display = 'block'; 
        })
        small.addEventListener('mouseout', function() {
        
            mask.style.display = 'none';
            big.style.display = 'none'; 
        })
        mask.addEventListener('mousemove', function(e) {
        
            var x = e.pageX - small.offsetLeft;
            var y = e.pageY - small.offsetTop;
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            if (maskX <= 0) {
        
                maskX = 0;
            } else if (maskX >= small.offsetWidth - mask.offsetWidth) {
        
                maskX = small.offsetWidth - mask.offsetWidth;
            } else {
        
                maskX = maskX; 
            }
            if (maskY <= 0) {
        
                maskY = 0;
            } else if (maskY >= small.offsetHeight - mask.offsetHeight) {
        
                maskY = small.offsetHeight - mask.offsetHeight;
            } else {
        
                maskY = maskY;
            }
            this.style.left = maskX + 'px';
            this.style.top = maskY + 'px';
            bigimg.style.left = -2 * maskX -mask.offsetWidth / 2 + 'px';
            bigimg.style.top = -2 * maskY - mask.offsetHeight / 2 + 'px';
        })
    })

运行结果：

![在这里插入图片描述][5dba9d50a6f14c8f85a31c5500071f92.jpeg_pic_center]

> 以上为本案例的全部代码，由于鼠标移动没办法截图，只能拍照凑合一下！>\_<

### 二、client 系列 ###

我们可以使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。  
![在这里插入图片描述][377eac93aa604a73a40d5103de7799ea.png_pic_center]  
`与 offset 不同的是，client 是不包含边框的！`

#### 1.立即执行函数 ####

立即执行函数，不需要调用，立马就能自己执行的函数。

(function() {
        })(); //第一种方法 
    (function() {
        }()); //第二种方法

> ① 第二个小括号可以看作是调用函数，里面可以直接传参数；  
> ② 这里面的函数除了匿名函数之外，也可以写有名字的函数；  
> ③ 立即执行函数最大的作用就是，独立创建了一个作用域，里面所有的变量都是局部变量，所以不会有命名冲突的情况。

`注意如果有多个立即执行函数时，一定要用分号将它们隔开！`

#### 2.flexible.js 源码 ####

flexible.js 是淘宝开发出的一个用来适配移动端的 JS 框架。该框架的核心原理就是根据制不同的 width 给网页中 HTML 根节点设置不同的 font-size，然后所有的 px 都用 rem 来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配。

源码如下：

(function flexible(window, document) {
        
        // 获取的html 的根元素
        var docEl = document.documentElement
            // dpr 物理像素比
        var dpr = window.devicePixelRatio || 1
     
        // adjust body font size  设置我们body 的字体大小
        function setBodyFontSize() {
        
            // 如果页面中有body 这个元素 就设置body的字体大小
            if (document.body) {
        
                document.body.style.fontSize = (12 * dpr) + 'px'
            } else {
        
                // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
                // 的字体大小
                document.addEventListener('DOMContentLoaded', setBodyFontSize)
            }
        }
        setBodyFontSize();
     
        // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
        function setRemUnit() {
        
            var rem = docEl.clientWidth / 10
            docEl.style.fontSize = rem + 'px'
        }
     
        setRemUnit()
     
        // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
        window.addEventListener('resize', setRemUnit)
            // pageshow 是我们重新加载页面触发的事件
        window.addEventListener('pageshow', function(e) {
        
            // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
            if (e.persisted) {
        
                setRemUnit()
            }
        })
     
        // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
        if (dpr >= 2) {
        
            var fakeBody = document.createElement('body')
            var testElement = document.createElement('div')
            testElement.style.border = '.5px solid transparent'
            fakeBody.appendChild(testElement)
            docEl.appendChild(fakeBody)
            if (testElement.offsetHeight === 1) {
        
                docEl.classList.add('hairlines')
            }
            docEl.removeChild(fakeBody)
        }
    }(window, document))

### 三、scroll 系列 ###

我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

![在这里插入图片描述][86ae565d26174a5abc41fcbb71f05982.png_pic_center]  
scroll 不包含边框，且 scrollWidth 得到的是内容实际的大小，包括超出去被折叠的部分，当滚动条往下拉的时候 scrollTop 得到的是被折叠的上侧距离。  
CSS 添加滚动条，`overflow: auto;`。

#### 1.固定侧边栏 ####

案例分析：  
① 原先侧边栏是绝对定位。  
② 当页面滚动到一定位置时，侧边栏改为固定定位。  
③ 页面继续滚动，会出现返回顶部模块。  
④ 需要用到页面滚动事件 scroll，因为是页面滚动，所以事件源是 document。  
⑤ 滚到什么位置停下？通过判断页面被卷去的上部值来确定。  
⑥ 注意元素被卷去的头部通过 element.scrollTop 获得，而**页面被卷去的头部则是 window.pageYOffset**。

<!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">
        <script src="测试.js"></script>
        <title>Document</title>
        <style>
            * {
          
                margin: 0;
                padding: 0;
            }
            .content {
          
                width: 500px;
                height: 3000px;
            }
            .big {
          
                position: absolute;
                width: 50px;
                height: 250px;
                right: 45px;
                top: 400px; 
            }
            .small1 {
          
                width: 100%;
                height: 50px;
                background-color: brown;
            }
            .small2 {
          
                width: 100%;
                height: 50px;
                background-color: rgb(53, 211, 39);
            }
            .small3 {
          
                width: 100%;
                height: 50px;
                background-color: rgb(119, 77, 233);
            }
            .small4 {
          
                width: 100%;
                height: 50px;
                background-color: rgb(205, 232, 56);
            }
            .back-top {
          
                display: none;
                width: 100%;
                height: 50px;
                background-color: rgb(240, 140, 11);
            }
        </style>
    </head>
    <body>
        <div class="content"></div>
        <div class="big">
            <div class="small1">特色</div>
            <div class="small2">喜欢</div>
            <div class="small3">反馈</div>
            <div class="small4">举报</div>
            <div class="back-top">顶部</div>
        </div>
    </body>
    </html>

//JS文档
    window.addEventListener('load', function() {
        
        var big = document.querySelector('.big');
        var backtop = document.querySelector('.back-top');
        var fixedTop = big.offsetTop - 300;
        document.addEventListener('scroll', function() {
        
            //1.滚动到一定位置时固定不动
            if (window.pageYOffset > 300) {
        
                big.style.position = 'fixed';
                big.style.top = fixedTop + 'px';
            } else {
        
                big.style.position = 'absolute';
                big.style.top = '400px';
            }
            //2.滚动到一定位置时显示返回顶部
            if (window.pageYOffset > 500) {
        
                backtop.style.display = 'block';
            } else {
        
                backtop.style.display = 'none';
            }
        })
    })

运行结果：  
![在这里插入图片描述][0672d177cb63477d98eaed2952614a78.png_pic_center]

### 四、动画函数 ###

#### 1.动画实现原理 ####

核心原理，通过定时器 setInterval() 不断移动盒子位置。

> 实现步骤：  
> ① 获得盒子当前位置；  
> ② 让盒子在当前位置加上1个移动距离；  
> ③ 利用定时器不断重复这个操作；  
> ④ 注意此元素需要添加定位，才能使用 element.style.left 移动距离。

<!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>Document</title>
        <style>
            div {
          
                position: absolute;
                width: 120px;
                height: 120px;
                left: 0;
                top: 0;
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            var div = document.querySelector('div');
            var timer = setInterval(function() {
          
                if (div.offsetLeft >= 1000) {
          
                    clearInterval(timer);
                }
                div.style.left = div.offsetLeft + 1 + 'px';
            }, 10);
        </script>
    </body>
    </html>

#### 2.动画函数封装 ####

注意函数需要传递两个参数，动画对象和目标位置。

//JS文档
    window.addEventListener('load', function() {
        
        function animate(obj, target) {
        
            clearInterval(obj.timer); 
            obj.timer = setInterval(fn, 10);
            function fn() {
        
                if (obj.offsetLeft >= target) {
        
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
        
            animate(div, 1000);
            animate(span, 1300);
        })
    })

运行结果：  
![在这里插入图片描述][eaa8c59376e943cea56e0b663a128132.png_pic_center]

> 注意点：  
> ① 性能优化，减少内存空间的开辟，通过给对象添加属性的方法，给不同的元素指定不同的定时器，程序执行效率大大提高；  
> ② 为避免重复按键动画加速的bug，设置定时器之前先清除掉之前的定时器。

#### 3.缓动动画实现 ####

我们前面所学的动画里面，所有的元素都是匀速运动的，而很多情况下，我们更希望元素运动的速度能够有所改变。  
缓动动画就是让元素运动速度有所变化，最常见的就是让其速度慢慢减下来直至停止。

> 思路：  
> ① 让盒子每次移动的距离慢慢变小，速度就会慢慢降下来；  
> ② 核心算法，把（**目标位置 - 现在位置）/ 10** 作为元素每次移动的步长；  
> ③ 盒子当前位置等于目标位置时，就停止定时器；  
> ④ 步长值需要进行取整，不要出现有小数存在的问题；  
> ⑤

这里我写了一个动画案例可以参考一下（有点丑哈）！

<!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>Document</title>
        <script src="测试.js"></script>
        <style>
            .hi {
          
                position: absolute;
                width: 300px;
                height: 120px;
                text-align: center;
                font-size: 63px;
                color: white;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                top: 120px;
                left: 0;
            }
            .head {
          
                position: absolute;
                width: 1000px;
                height: 600px;
                border: 4px solid white;
                border-radius: 70%;
            }
            .d1 {
          
                position: absolute;
                width: 120px;
                height: 140px;
                left: 0;
                top: 80px;
                background-color: white;
                border-radius: 50%;
            }
            .eyes {
          
                position:absolute;
                width: 70%;
                height: 70%;
                top: 13px;
                left: 10px;
                background-color: black;
                border-radius: 50%;
            }
            .eye {
          
                position: absolute;
                width: 15px;
                height: 15px;
                top: 15px;
                left: 15px;
                background-color: white;
                border-radius: 60%;
            }
            .d2 {
          
                position: absolute;
                width: 120px;
                height: 60px;
                left: 0;
                top: 240px;
                background-color: red;
                opacity: 0.5;
                border-radius: 100%;
            }
            span {
          
                position: absolute;
                display: block;
                width: 50px;
                height: 50px;
                left: 0;
                background-color: yellow;
                border-radius: 20%;
            }
            .s2,.s5 {
          
                top: 350px;
            }
            .s3,.s4 {
          
                top: 370px;
            }
            body {
          
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div class="hi">Hi~</div>
        <div class="head"></div>
        <div class="d1">
            <div class="eyes">
                <div class="eye"></div>
            </div>
        </div>
        <div class="d1">
            <div class="eyes">
                <div class="eye"></div>
            </div>
        </div>
        <div class="d2"></div>
        <div class="d2"></div>
        <span class="s2"></span>
        <span class="s3"></span>
        <span class="s4"></span>
        <span class="s5"></span>
        <button>点击开始</button>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][544b494d96994ee2842a861d98cdc70f.png_pic_center]

#### 4.添加回调函数 ####

函数可以作为一个参数传到另一个函数里面，直至另一个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。  
回调函数应该放在定时器结束的位置。

#### 5.动画函数使用 ####

因为我们以后会经常使用这个动画函数，不妨把它单独封装到一个 JS 文件里面，用的时候直接引用该 JS 文件即可。

这里有一个案例，鼠标经过一个盒子时，滑出侧边提示栏。

//JS文档
    function animate(obj, target, callback) {
        
            clearInterval(obj.timer); 
            obj.timer = setInterval(fn, 4);
            function fn() {
        
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
        
                    clearInterval(obj.timer);
                    if (callback) {
        
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }
        }

[fe7667f9b9b44671bccb566fcf75d797.png_pic_center]: https://img-blog.csdnimg.cn/fe7667f9b9b44671bccb566fcf75d797.png#pic_center
[614f57c8ec684f14bc0fba1e46189c9c.png_pic_center]: https://img-blog.csdnimg.cn/614f57c8ec684f14bc0fba1e46189c9c.png#pic_center
[e8e69e3ed3e744ae89c640281d897df2.png_pic_center]: https://img-blog.csdnimg.cn/e8e69e3ed3e744ae89c640281d897df2.png#pic_center
[5dba9d50a6f14c8f85a31c5500071f92.jpeg_pic_center]: https://img-blog.csdnimg.cn/5dba9d50a6f14c8f85a31c5500071f92.jpeg#pic_center
[377eac93aa604a73a40d5103de7799ea.png_pic_center]: https://img-blog.csdnimg.cn/377eac93aa604a73a40d5103de7799ea.png#pic_center
[86ae565d26174a5abc41fcbb71f05982.png_pic_center]: https://img-blog.csdnimg.cn/86ae565d26174a5abc41fcbb71f05982.png#pic_center
[0672d177cb63477d98eaed2952614a78.png_pic_center]: https://img-blog.csdnimg.cn/0672d177cb63477d98eaed2952614a78.png#pic_center
[eaa8c59376e943cea56e0b663a128132.png_pic_center]: https://img-blog.csdnimg.cn/eaa8c59376e943cea56e0b663a128132.png#pic_center
[544b494d96994ee2842a861d98cdc70f.png_pic_center]: https://img-blog.csdnimg.cn/544b494d96994ee2842a861d98cdc70f.png#pic_center