07IV-JavaScript DOM事件（第四天坐标属性）

最新推荐文章于 2024-07-17 15:26:15 发布

yfp020907

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量48

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/yfp020907/article/details/132698611

版权

1.元素的scroll 属性，scroll 翻译过来是滚动的意思

<!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>
        .father {
            width: 500px;
            height: 300px;
            background-color: orange;
            margin: 0 auto;
            overflow: auto;
        }

        .son {
            width: 700px;
            height: 700px;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>

        // scrollTop   scrollLeft  元素被卷进去的距离
        var father = document.getElementsByClassName('father')[0];

        father.onscroll = function () {
            console.log(father.scrollTop);
            console.log(father.scrollLeft);
        }

        // scrollWidth scrollHeight  返回自身实际的宽度和高度(包含边框)
        father.onscroll = function () {
            console.log(father.scrollWidth);
            console.log(father.scrollHeight);
        }
    </script>
</body>

</html>

2.window的坐标属性

<!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>
        div {
            width: 2000px;
            height: 2000px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // var box = document.getElementsByTagName('div')[0];


        // window.innerWidth 窗口的宽度
        // window.innerHeight 窗口的高度
        console.log(window.innerHeight);
        console.log(window.innerWidth);

        // window.pageXOffset  窗口被卷到左边的大小
        console.log(window.pageXOffset);

        // window.pageYOffset  窗口被卷到上面的大小
        console.log(window.pageYOffset);
    </script>
</body>

</html>

3.楼层导航案例

<!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;
        }
    </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 box = document.getElementsByClassName('box');

        // 获取侧栏节点
        var bar = document.getElementsByClassName('slid-bar')[0];

        //侧边栏子节点
        var son = bar.children;


        // 排他思想
        function Fun(e) {
            for (var i = 0; i < e.length; i++) {
                e[i].style.backgroundColor = 'white';
            }
        }
        // document.onscroll = function () {
        //     if (window.pageYOffset >= box[0].offsetTop && window.pageYOffset < box[1].offsetTop) {
        //         bar.style.display = 'block';
        //         Fun(son);
        //         son[0].style.backgroundColor = 'red';
        //     } else if (window.pageYOffset >= box[1].offsetTop && window.pageYOffset < box[2].offsetTop) {
        //         Fun(son);
        //         son[1].style.backgroundColor = 'red';
        //     } else if (window.pageYOffset >= box[2].offsetTop && window.pageYOffset < box[3].offsetTop) {
        //         Fun(son);
        //         son[2].style.backgroundColor = 'red';
        //     } else if (window.pageYOffset >= box[3].offsetTop && window.pageYOffset < box[4].offsetTop) {
        //         Fun(son);
        //         son[3].style.backgroundColor = 'red';
        //     } else if (window.pageYOffset >= box[4].offsetTop) {
        //         Fun(son);
        //         son[4].style.backgroundColor = 'red';
        //     } else {
        //         bar.style.display = 'none';
        //     }

        // }


        document.onscroll = function () {
            for (var i = 0; i < box.length; i++) {
                if (window.pageYOffset >= box[i].offsetTop) {
                    bar.style.display = 'block';
                    Fun(son);
                    son[i].style.backgroundColor = 'red';
                }
                if (window.pageYOffset < box[0].offsetTop) {
                    bar.style.display = 'none';
                }
            }
        }
        for (var j = 0; j < son.length; j++) {
            son[j].index = j;
            son[j].onclick = function () {
                console.dir(this);
                console.log(box[this.index]);
                document.documentElement.scrollTop = box[this.index].offsetTop;
            }
        }
    </script>
</body>

</html>

4.放大镜案例

<!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>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            position: relative;
        }

        .box img {
            width: 100%;
        }

        .big {
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            position: absolute;
            left: 410px;
            top: 0px;
            overflow: hidden;
            display: none;
        }

        .big .img {
            width: 1500px;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .mengban {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://pic.qqtn.com/up/2018-2/2018021600215298765.jpg" alt="">
        <div class="big">
            <img src="https://pic.qqtn.com/up/2018-2/2018021600215298765.jpg" alt="" class="img">
        </div>
        <div class="mengban"></div>
    </div>

    <script>
        // 获取小盒子节点
        var box = document.getElementsByClassName('box')[0];
        // 获取大盒子节点
        var big = document.getElementsByClassName('big')[0];
        // 获取蒙版节点
        var mengban = document.getElementsByClassName('mengban')[0];
        // 获取大图片节点
        var img = document.getElementsByClassName('img')[0];

        // 给小盒子加入鼠标移入事件
        box.onmouseenter = function () {
            // 让蒙版显示
            mengban.style.display = 'block';
            // 让大盒子显示
            big.style.display = 'block';

            // 比例
            var scale = (img.offsetWidth - big.offsetWidth) / (box.offsetWidth - mengban.offsetWidth);

            // 给大盒子添加鼠标移入事件
            box.onmousemove = function (e) {
                // 蒙版的左偏移量=
                mengban.style.left = e.clientX - box.offsetLeft - mengban.offsetWidth / 2 + 'px';
                if (mengban.offsetLeft > box.offsetWidth - mengban.offsetWidth) {
                    mengban.style.left = box.offsetWidth - mengban.offsetWidth + 'px';
                } else if (mengban.offsetLeft < 0) {
                    mengban.style.left = 0 + 'px';
                }
                mengban.style.top = e.clientY - box.offsetTop - mengban.offsetTop / 2 + 'px';
                if (mengban.offsetTop > box.offsetHeight - mengban.offsetHeight) {
                    mengban.style.top = box.offsetHeight - mengban.offsetHeight + 'px';
                } else if (mengban.offsetTop < 0) {
                    mengban.style.top = 0 + 'px';
                }

                img.style.left = -mengban.offsetLeft * scale + 'px';
                img.style.top = -mengban.offsetTop * scale + 'px';
            }

            // 给大盒子添加鼠标离开事件
            box.onmouseleave = function () {
                mengban.style.display = 'none';
                big.style.display = 'none';
            }
        }
    </script>
</body>

</html>