js 特效

效果如下：图片来源于乌拉拉。

 

 let owrap = document.getElementById("wrap");
            // 监听鼠标按下事件
            window.onmousedown = (e) => {  
                let div = document.createElement("div"),
               //图片展示盒
                    downX = e.clientX, 
               //获取鼠标按下的坐标x和y
                    downY = e.clientY;
                div.style.top = downY + "px"; 
                div.style.left = downX + "px";
                div.style.backgroundImage = `url("images/${Math.floor(Math.random() * 3)}.jpg")`;; 
                owrap.appendChild(div); 
                window.onmousemove = (e) => {
                    let moveX = e.clientX,
                        moveY = e.clientY; 
                //获取移动中鼠标的坐标x和y。
                    div.style.width = Math.abs(moveX - downX) + "px";
                    div.style.height = Math.abs(moveY - downY) + "px"
                    div.style.top = Math.min(moveY, downY) + "px";
                    div.style.left = Math.min(moveX, downX) + "px";
                };
               //鼠标抬起事件
               window.onmouseup = () => {
                    window.onmousemove = null;
                };
                
            };

*图片没有做成GIF，具体效果参考第一张图片，