好玩儿的JS特效，仿写拖动模糊框

拖动模糊框

需求：

	在图片上拖动按钮，图片蒙层慢慢覆盖，当蒙层边缘碰到左右下
	角文字时，文字隐藏。

技术：

	监听器，鼠标坐标获取

效果图

源码分享：
HTML

<h1>Image Comparison Slider</h1>
    <nav>
<!--底层图--> <img src="img/img-original.jpg" alt=""> 
<!--蒙版使用背景图--> <div id="img">
            <h3 id="leftBottom">Modified</h3>
<!--拖动按钮-->  <button id="btn">
                <span class="iconfont icon-zuojiantou"></span>
                <span class="iconfont icon-youjiantou"></span>
            </button>
        </div>
        <h3 id="rightBottom">Original</h3>
    </nav>

CSS样式

<style>
        * {
            margin: 0;
            padding: 0;
            color: #E8F6F5;
        }
        body {
            background-color: #566B89;
            padding-top: 1px;
        }
        nav {
            width: 1200px;
            height: 675px;
            overflow-x: hidden;
            position: relative;
            margin: 100px auto 0;
        }
        h1 {
            text-align: center;
            margin-top: 100px;
            font-weight: 400;
        }
        nav>img {
            position: absolute;
        }
        #img {
            width: 600px;  /*初始状态显示一半蒙层*/
            height: 675px;
            background: url("img/img-modified.jpg");  /*这里容器大小与图片一致，若想改变大小，设置背景大小属性  background-size: 图片宽 图片高;*/
            position: relative;
            animation: start 1s ease-in-out;
        }
        #img img {
            width: 100%;
            height: 100%;
        }
        @keyframes start {
            0% {
                width: 0;
            }
            50% {
                width: 650px;
            }
            100% {
                width: 600px;
            }
        }
        #btn {
            position: absolute;
            right: -25px;
            top:  calc(50% - 25px);
            width: 56px;
            height: 56px;
            line-height: 56px;
            border: none;
            outline: none;
            border-radius: 50%;
            background-color: pink;
            font-size: 0;
            text-align: center;
            color: white;
            cursor: pointer;
        }
        .iconfont {
            font-size: 20px;
        }

        h3 {
            font-weight: 400;
            color: white;
        }
        #leftBottom,#rightBottom {
            position: absolute;
            width: 100px;
            bottom: 50px;
        }
        #leftBottom {
            left: 50px;
        }
        #rightBottom {
            right: 50px;
        }
    </style>

JS部分

<script>
        let img = document.querySelector("#img");
        let btn = document.querySelector("#btn");
        let nav = document.querySelector("nav");
        let leftBottom = document.querySelector("#leftBottom");
        let rightBottom = document.querySelector("#rightBottom");
        btn.onmousedown = function (e) {
            let clientx = e.clientX;  // 点击获取鼠标初始X坐标
            nav.onmousemove = function () {
                let e = arguments[0] || window.event;
                let X = e.clientX;   // 移动时获取鼠标移动时的X坐标
                let imgW = parseInt(getComputedStyle(img,null).width);
                img.style.width = `${ imgW + X - clientx}px`;   // 图片宽度 = 移动时的X坐标 - 点击时的初始坐标   也就是 图片宽度 + 鼠标X坐标的偏移量
                clientx = X ;   // 将最新的位置的X坐标 赋值给 点击初始坐标   也就是 更新 X坐标初始值
                if (imgW < 150){
                    leftBottom.style.display = "none";
                }else {
                    leftBottom.style.display = "block";
                }
                if (imgW > 1050){
                    rightBottom.style.display = "none";
                }else {
                    rightBottom.style.display = "block";
                }
            }
        };
        document.onmouseup = function () {
            nav.onmousemove = null;
        }
    </script>