案例(三个小案例)-CSDN博客

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132527270

拖拽盒子

<!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>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .father {
            width: 800px;
            height: 800px;
            border: 1px solid black;
            margin: 100px auto;
            position: relative;
        }
        
        .father .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.getElementsByClassName("father")[0];
        var son = document.getElementsByClassName("son")[0];
        // 获取小盒子的最大移动距离
        var max = father.clientWidth - son.clientWidth;
        var max2 = father.clientHeight - son.clientHeight;
        // console.log(father.offsetWidth - 2)
        son.onmousedown = function(e) {
            // 获取鼠标点击位置距离盒子内侧坐标
            var startX = e.offsetX;
            var startY = e.offsetY;
            // 给son盒子添加鼠标移动事件
            son.onmousemove = function(e) {
                // 鼠标距离body的距离-鼠标距离盒子内侧的距离-最大盒子距离父元素的左偏移量=移动距离
                var _left = e.clientX - startX - father.offsetLeft;
                son.style.left = _left + "px";
                // 判断 son盒子的最大偏移量大于或等于最大移动距离的话，小盒子的left就等于最大偏移量
                if (son.offsetLeft >= max) {
                    son.style.left = max + "px";
                    // 如果son的偏移量等于0的话就等于0
                } else if (son.offsetLeft <= 0) {
                    son.style.left = 0 + "px";
                }
                var _top = e.clientY - startY - father.offsetTop;
                son.style.top = _top + "px";
                if (son.offsetTop >= max2) {
                    son.style.top = max2 + "px";
                } else if (son.offsetTop <= 0) {
                    son.style.top = 0 + "px";
                }
            };
        }
    </script>
</body>

</html>

楼层导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            background-color: #000;
        }

        .banner {
            width: 100%;
            height: 600px;
            background-color: pink;
        }

        .content {
            width: 1200px;
            margin: 0 auto;
        }

        .content div {
            height: 800px;
            width: 100%;
            font-size: 40px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            line-height: 800px;
        }

        .xsms {
            background-color: springgreen;
        }

        .phb {
            background-color: skyblue;
        }

        .foryou {
            background-color: purple;
        }

        .family {
            background-color: orange;
        }

        .phone {
            background-color: greenyellow;
        }

        .bottom {
            width: 100%;
            height: 300px;
            background-color: #000;
        }

        .slid-bar {
            width: 150px;
            position: fixed;
            top: 50%;
            left: 100px;
            margin-top: -75px;
            display: none;
        }

        .slid-bar div {
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ccc;
        }

        .active {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="nav"></div>
    <div class="banner"></div>
    <div class="content">
        <div class="xsms box">限时秒杀</div>
        <div class="phb box">排行榜</div>
        <div class="foryou box">为你推荐</div>
        <div class="family box">家用电器</div>
        <div class="phone box">手机数码</div>
    </div>
    <div class="bottom"></div>

    <div class="slid-bar">
        <div>限时秒杀</div>
        <div>排行榜</div>
        <div>为你推荐</div>
        <div>家用电器</div>
        <div>手机数码</div>
    </div>

    <script>

        var slidBar = document.getElementsByClassName("slid-bar")[0];

        var box = document.getElementsByClassName("box");
        var floor = slidBar.children;

        // 排他思想  干掉其他，只留下自己
        function sibling(eles, name) {
            for (var i = 0; i < eles.length; i++) {
                eles[i].style.backgroundColor = "#fff";
            }
        }

        // 监听页面滚动
        // document.onscroll = function () {
        //     console.log("页面滚动");
        //     // console.log(window.pageYOffset);
        //     console.log(box[0].offsetTop);
        //     // 当滚动距离 >= "限时秒杀"距离页面头部距离时，侧边栏展示
        //     // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
        //     if (window.pageYOffset >= box[0].offsetTop && window.pageYOffset < box[1].offsetTop) {
        //         slidBar.style.display = "block";
        //         sibling(floor)
        //         floor[0].style.backgroundColor = "red";

        //         // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
        //     } else if (window.pageYOffset >= box[1].offsetTop && window.pageYOffset < box[2].offsetTop) {
        //         sibling(floor)
        //         floor[1].style.backgroundColor = "red";

        //         // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
        //     } else if (window.pageYOffset >= box[2].offsetTop && window.pageYOffset < box[3].offsetTop) {
        //         sibling(floor)
        //         floor[2].style.backgroundColor = "red";

        //         // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
        //     } else if (window.pageYOffset >= box[3].offsetTop && window.pageYOffset < box[4].offsetTop) {
        //         sibling(floor)
        //         floor[3].style.backgroundColor = "red";

        //         // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
        //     } else if (window.pageYOffset >= box[4].offsetTop) {
        //         sibling(floor)
        //         floor[4].style.backgroundColor = "red";
        //     }

        //     // 当 当滚动距离 < "限时秒杀"距离页面头部距离时，侧边栏隐藏
        //     else {
        //         slidBar.style.display = "none";
        //     }
        // }

        
        // 滚动  当前滚动距离   排他思想

        // document.onscroll = function () {
        //     for (var i = 0; i < box.length; i++) {
        //         if (window.pageYOffset >= box[i].offsetTop) {
        //             slidBar.style.display = "block";
        //             sibling(floor);
        //             floor[i].style.backgroundColor = "red";
        //         }
        //         if (window.pageYOffset < box[0].offsetTop) {
        //             slidBar.style.display = "none";
        //         }
        //     }
        // }

        // for (var j = 0; j < floor.length; j++) {
        //     // 通过自定义属性
        //     floor[j].index = j;

        //     // floor[0].index = 0;
        //     // floor[1].index = 1;
        //     // ...

        //     floor[j].onclick = function () {
        //         // 事件中的this指向事件源
        //         // this.index 代表点的时第几个

        //         // 控制页面卷上去的距离  scrollTop
        //         // 拿到box[j].offsetTop
        //         console.dir(this);
        //         console.log(box[this.index]);
        //         document.documentElement.scrollTop = box[this.index].offsetTop;
        //     }
        // }


        // 楼层导航完整版
        // document.onscroll = function () {
        //     for (var j = 0; j < floor.length; j++) {
        //         // 通过自定义属性
        //         floor[j].index = j;

        //         // 用于判断当前滚动位置属于那一块
        //         if (window.pageYOffset >= box[j].offsetTop) {
        //             slidBar.style.display = "block";
        //             sibling(floor);
        //             floor[j].style.backgroundColor = "red";
        //         }

        //         if (window.pageYOffset < box[0].offsetTop) {
        //             slidBar.style.display = "none";
        //         }

        //         floor[j].onclick = function () {
        //             // 控制页面卷上去的距离  scrollTop
        //             // 拿到box[j].offsetTop
        //             console.dir(this);
        //             console.log(box[this.index]);
        //             document.documentElement.scrollTop = box[this.index].offsetTop;
        //         }
        //     }
        // }




    </script>
</body>

</html>

放大镜

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .small {
            border: 1px solid #ccc;
            width: 400px;
            height: 400px;
            position: relative;
        }
        
        .small img {
            width: 100%;
        }
        
        .big {
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            position: absolute;
            left: 410px;
            top: 0;
            overflow: hidden;
            display: none;
        }
        
        .big img {
            width: 1600px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .mask {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="small">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffe0e69ec-5ccd-4e08-87cc-901f6f0e9e05%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695458921&t=d95b8323fff0c51ae262e37c18df8d3c"
            alt="">
        <div class="big">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffe0e69ec-5ccd-4e08-87cc-901f6f0e9e05%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695458921&t=d95b8323fff0c51ae262e37c18df8d3c"
                alt="" class="bigimg">
        </div>

        <div class="mask"></div>
    </div>

    <script>
        var small = document.getElementsByClassName("small")[0];
        var big = document.getElementsByClassName("big")[0];
        var mask = document.getElementsByClassName("mask")[0];
        var bigImg = document.getElementsByClassName("bigimg")[0];


        small.onmouseenter = function() {
            big.style.display = "block";
            mask.style.display = "block";

            // var scale = (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);
            var scale = (big.offsetWidth - 2) / (mask.offsetWidth + 2);


            small.onmousemove = function(e) {
                // console.log("one" + e.offsetX);
                console.log("two" + e.clientX);
                mask.style.left = e.clientX - small.offsetLeft - mask.offsetWidth / 2 + "px";
                if (mask.offsetLeft > small.offsetWidth - mask.offsetWidth) {
                    mask.style.left = small.offsetWidth - mask.offsetWidth + "px";
                } else if (mask.offsetLeft < 0) {
                    mask.style.left = 0 + "px";
                }
                mask.style.top = e.clientY - small.offsetTop - mask.offsetHeight / 2 + "px";
                if (mask.offsetTop > small.offsetHeight - mask.offsetHeight) {
                    mask.style.top = small.offsetHeight - mask.offsetHeight + "px";
                } else if (mask.offsetTop < 0) {
                    mask.style.top = 0 + "px";
                }

                // 盒子右移，图片左移
                // 蒙版最大移动距离 = small.offsetWidth - mask.offsetWidth
                // 放大图片的最大移动距离 = bigImg.offsetWidth - big.offsetWidth
                // bigImg.style.left = -mask.offsetLeft * scale + "px";
                // bigImg.style.top = -mask.offsetTop * scale + "px";
            }
        }

        small.onmouseleave = function() {
            big.style.display = "none";
            mask.style.display = "none";
        }

        // 放大镜逻辑
        // 1.蒙版跟随鼠标
    </script>


</body>

</html>