js——实现缩略图滑动，实际图对应滑动

效果：
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>缩略图实现</title>
    <style>
        html {
            text-align: center;
            background-color: #090E26;
            color: #fff;
        }

        .d-thumb {
            width: 1000px;
            height: 50px;
            position: relative;
            margin: 0 auto 100px auto;
            background: rgba(157, 213, 250, 0.2);
        }

        .slidediv {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100px;
            height: 100%;
            background: rgba(157, 213, 250, 0.2);
            cursor: pointer;
            z-index: 2;
        }

        .d-real {
            width: 90%;
            height: 100px;
            margin: auto;
            overflow: auto;
            background: rgba(157, 213, 250, 0.2);
        }

        .d-content {
            height: 100%;
        }


    </style>
</head>
<body>
<p style="margin-top:100px;">缩略图：</p>
<div class="d-thumb">
    <!-- 滑块部分 -->
    <div
            class="slidediv"
            id="thumbScrollBlock"
            @click.stop=""
            onmousedown="mousedown()"
            onmouseup="mouseup()"
    ></div>
</div>
<p>实际图：</p>
<div class="d-real">
    <div class="d-content"></div>
</div>

<script type="text/javascript">
    window.onload = function () {
        let wid = 30000;
        document.querySelector('.d-content').style.width = wid + 'px'; // 设置实际图宽度
        let multiple = 0; // 缩放比例-实际/缩略
        let wid_real = document.querySelector('.d-content').clientWidth; // 实际宽度
        let wid_thumb = document.querySelector('.d-thumb').clientWidth; // 缩略图宽度
        if (wid_real && wid_real > 130) {
            let wid_scroll = wid_thumb - 100; // 缩略图可滑动的距离（去除滑块的宽度）
            multiple1 = (wid_real / wid_scroll).toFixed(10); // 实际宽度与缩略图宽度的比例
        }
        slide();
    }

    /** 缩略图鼠标按下 */
    function mousedown(event) {
        let ev = event || window.event;
        let _target = ev.target;
        let startx = ev.clientX; // 点击处，距离浏览器左侧的距离
        let sb_bkx = startx - ev.target.offsetLeft; // ev.target.offsetLeft是点击处距离缩略图左侧的距离；sb_bkx是缩略图左侧距离浏览器左侧的距离
        let ww = document.documentElement.clientWidth;
        if (ev.preventDefault) {
            ev.preventDefault();
        } else {
            ev.returnValue = false;
        }

        document.onmousemove = function (ev) {
            let htmlWidth = document.querySelector(".d-thumb").clientWidth - 100; // 缩略图可滚动长度
            let eve = ev || window.event;
            if (eve.clientX > ww) {
                return false;
            }
            let endx = eve.clientX - sb_bkx;
            if (endx >= 0 && endx <= htmlWidth) {
                _target.style.left = endx + "px";
            } else if (endx < 0) { // 已滑动到最左端
                _target.style.left = 0 + "px";
            } else if (endx > htmlWidth) {  // 已滑动到最右端
                _target.style.left = htmlWidth + "px";
            }

            let datavalLeftup = _target.style.left.replace("px", "") * multiple1; // 缩略图滑动后，实际滑动距离
            document.querySelector(".d-real").scrollLeft = datavalLeftup; // 实际滑动
        };
    }


    /** 缩略图鼠标松开 */
    function mouseup(e) {
        document.onmousemove = null;
    }

    /** 滑动实际时，控制缩略图滑动 */
    function slide() {
        let wid_real = document.querySelector('.d-content').clientWidth; // 实际宽度
        let wid_thumb = document.querySelector('.d-thumb').clientWidth; // 缩略图宽度
        let wid_scroll = wid_thumb - 100; // 缩略图可滑动宽度
        if (wid_real && wid_real > 130) {
            let multiple2 = (wid_thumb / wid_real).toFixed(10); // 缩略图与实长比例
            document.querySelector(".d-real").onscroll = function (e) {
                let WT = parseInt(e.target.scrollLeft);
                let WTnew = (WT * multiple2).toFixed(10);
                document.querySelector("#thumbScrollBlock").style.left = WTnew >= wid_scroll ? wid_scroll : WTnew + 'px'; // 控制不能超出缩略图的最大宽度
            }
        }
    }
</script>
</body>
</html>
posted @ 2021-06-07 15:26 前端-xyq 阅读(467) 评论(0) 收藏举报
刷新页面返回顶部
前端-xyq

js——实现缩略图滑动，实际图对应滑动

公告
