實(shí)現(xiàn)拖拽預(yù)覽圖片切換效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .noselect {
                -moz-user-select: none;
                /*火狐*/
                -webkit-user-select: none;
                /*webkit瀏覽器*/
                -ms-user-select: none;
                /*IE10*/
                /*早期瀏覽器*/
                user-select: none;
            }

            #box {
                position: relative;
            }

            .img-box {
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            #white {
                z-index: 1;
            }

            #black {
                z-index: 2;
                overflow: hidden;
            }

            #move {
                position: absolute;
                z-index: 3;
                height: 563px;
                width: 5px;
                background: skyblue;
                transform: translate(-50%, 0);
                box-sizing: border-box;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            }

            #move-box {
                position: absolute;
                width: 60px;
                height: 60px;
                background: skyblue;
                border-radius: 50%;
                border: 2px solid #fff;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                cursor: move;
                box-sizing: border-box;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            }
        </style>
    </head>
    <body>
        <div id="box" class="noselect">
            <div id="white" class="img-box white">
                <img draggable="false" class="img" src="./white.jpg" alt="" />
            </div>
            <div id="black" class="img-box" style="width: 500px">
                <img draggable="false" class="img" src="./black.jpg" alt="" />
            </div>
            <div id="move" style="left: 500px">
                <div id="move-box"></div>
            </div>
        </div>
        <script>
            window.onload = () => {
                var startX, startY;
                var width = 1000;
                var moveX = width / 2;

                var move_box = document.getElementById("move-box");
                var move = document.getElementById("move");
                var black = document.getElementById("black");

                var box = document.getElementById("box");
                box.style.width = width + "px";

                var imgs = document.querySelectorAll(".img");
                for (let i = 0; i < imgs.length; i++) {
                    const element = imgs[i];
                    element.style.width = width + "px";
                }

                move_box.onmousedown = (me) => {
                    startX = me.clientX;
                    startY = me.clientY;

                    document.onmousemove = (de) => {
                        var endX = de.clientX;
                        var endY = de.clientY;

                        var offsetX = endX - startX;
                        var offsetY = endY - startY;

                        var newLeft = moveX + offsetX;
                        if (newLeft <= 0) {
                            move.style.left = "0px";
                        } else if (newLeft >= width) {
                            move.style.left = width + "px";
                        } else {
                            move.style.left = newLeft + "px";
                        }

                        black.style.width = move.style.left;
                    };

                    document.onmouseup = () => {
                        moveX = parseFloat(move.style.left.replace("px", ""));
                        document.onmousemove = () => {};
                    };
                };
            };
        </script>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容