实现拖拽预览图片切换效果

作者: Hi小胡 | 来源:发表于2023-09-10 10:36 被阅读0次

祭奠简单实现QQ发说说多选图片功能。
拖拽API
jQuery之切换
单选开关（点击选择与否切换）
模仿即刻安卓APP的DragToFinishPhotoView实
iOS切换app预览模糊效果
2017-02-19
vue实现图片拖拽效果
进阶-任务18
Laravel 中 bootstrap fileinput 图

<!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>