JavaScript -- 总结 10 （小白）

柿子来了

于 2024-08-09 09:00:00 发布

阅读量272

点赞数 9

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140888603

版权

MouseEvent属性

<!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>
        .box {
            width: 200px;
            height: 800px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName("box")[0];

        box.onclick = function (e) {
            // 事件对象
            // event 
            console.log(e);
            // 点击位置距离当前body可视区域的x，y坐标
            console.log(e.clientX);
            console.log(e.clientY);

            // 对于整个页面来说，包括了被卷去的body部分的长度,相对文档区域左上角距离
            console.log(e.pageX);
            console.log(e.pageY);

            // 点击位置距离当前电脑屏幕的x，y坐标
            console.log(e.screenX);
            console.log(e.screenY);

            // 鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框) 
            console.log(e.offsetX);
            console.log(e.offsetY);
        }
    </script>
</body>

</html>

元素的offset属性

<!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>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid #000;

            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            padding: 30px;

            position: absolute;
            left: 40px;
            top: 100px;
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="box"></div>
    </div>


    <script>
        var box = document.getElementsByClassName("box")[0];

        // 元素相对父元素上边的偏移
        console.log(box.offsetTop);
        // 元素相对父元素左边的偏移
        console.log(box.offsetLeft);

        // box.offsetLeft = 50;
        box.style.left = 80 + "px";

        // 自身包括padding 、 边框、内容区的宽度
        console.log(box.offsetWidth);
        // 自身包括padding 、 边框、内容区的高度
        console.log(box.offsetHeight);

        // 作为参照的父元素
        console.log(box.offsetParent);
    </script>
</body>

</html>

练习点击按钮，盒子向右偏移

<!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>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>

<body>

    <button>点击</button>

    <div class="box"></div>
    <script>
        // 每点击一次按钮，盒子向右偏移 10px
        var btn = document.getElementsByTagName("button")[0];
        var box = document.getElementsByTagName("div")[0];

        btn.onclick = function () {
            // 在当前位置再 + 10
            box.style.left = box.offsetLeft + 10 + "px";
        }
    </script>
</body>

</html>

元素的client属性

<!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>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;

            border: 10px solid #0f0;

        }
    </style>
</head>

<body>

    <div class="father">
        <div class="box"></div>
    </div>


    <script>
        var box = document.getElementsByClassName("box")[0];

        // 内容可视区域的高度/宽度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线)
        console.log(box.clientWidth);
        console.log(box.clientHeight);

        // 边框厚度
        console.log(box.clientLeft);
        console.log(box.clientTop);
    </script>
</body>

</html>

元素的scroll属性

<!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>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            overflow: auto;
        }

        .box {
            width: 200px;
            height: 800px;
            background-color: #f00;
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="box"></div>
    </div>


    <script>
        var father = document.getElementsByClassName("father")[0];
        var box = document.getElementsByClassName("box")[0];

        
        father.onscroll = function(){
            // // 被卷去的上侧距离
            // console.log(father.scrollTop);
            // // 被卷去的左侧距离
            // console.log(father.scrollLeft);

            console.log(father.scrollWidth);
            console.log(father.scrollHeight);

        }
    </script>
</body>

</html>

window坐标属性

<!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>
        .box {
            width: 200px;
            height: 2000px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <script>
        // 返回以像素为单位的窗口的内部宽度。
        console.log(window.innerWidth);
        console.log(window.innerHeight);

        // 获取当前页面相对于窗口显示区左上角的 Y 位置  页面滚动的距离
        console.log(window.pageYOffset);
        

        console.log(window.screen.width);
    </script>
</body>

</html>

放大镜

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .small {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px;

            position: relative;
        }

        .small img {
            width: 100%;
        }

        .mark {
            width: 100px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.3);

            position: absolute;
            left: 0;
            top: 0;

            /* display: none; */
        }

        .big {
            width: 300px;
            height: 450px;
            overflow: hidden;

            position: absolute;
            left: 410px;
            top: 0;

            /* display: none; */
        }

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

    </style>
</head>

<body>
    <div class="small">
        <img src="https://x.dscmall.cn/storage/data/gallery_album/140/images/140_P_1684805326420.jpg" alt="">

        <!-- 蒙版 -->
        <div class="mark"></div>

        <!-- 大图 -->
        <div class="big">
            <img src="https://x.dscmall.cn/storage/data/gallery_album/140/images/140_P_1684805326420.jpg" alt="" class="bigImg">
        </div>
    </div>

    <script>
        // 获取元素
        var small = document.getElementsByClassName("small")[0];
        var mark = document.getElementsByClassName("mark")[0];
        var big = document.getElementsByClassName("big")[0];
        var bigImg = document.getElementsByClassName("bigImg")[0];



        // 1.鼠标移入小图片，蒙版和放大图片显示
        // small.onmouseenter = function(){
        //     mark.style.display = "block";
        //     big.style.display = "block";
        // }

        // // 2.鼠标移出，隐藏
        // small.onmouseleave = function(){
        //     mark.style.display = "none";
        //     big.style.display = "none";
        // }

        // 3.鼠标移动时，蒙版跟着鼠标走
        small.onmousemove = function (e) {
            // console.log(e.offsetX);
            // offsetX offsetY 有弊端，不能用
            // console.log(e.clientX - small.offsetLeft - small.clientLeft);

            var markX = e.pageX - small.offsetLeft - small.clientLeft - mark.offsetWidth / 2;
            var markY = e.pageY - small.offsetTop - small.clientTop - mark.offsetHeight / 2;

            // 规定蒙版移动范围
            if (markX < 0) {
                markX = 0;
            }
            if (markY < 0) {
                markY = 0;
            }
            if (markX > small.clientWidth - mark.offsetWidth) {
                markX = small.clientWidth - mark.offsetWidth
            }
            if (markY > small.clientHeight - mark.offsetHeight) {
                markY = small.clientHeight - mark.offsetHeight
            }

            // 鼠标需要出现在蒙版中间
            mark.style.left = markX + "px";
            mark.style.top = markY + "px";

            // 放大图片跟蒙版同步
            // 计算比例
            var ratio = big.clientWidth / mark.offsetWidth;
            // 大图的偏移
            var imgX = markX * ratio;
            var imgY = markY * ratio;

            bigImg.style.left = -imgX + "px";
            bigImg.style.top = -imgY + "px";
        }
    </script>
</body>

</html>

楼层导航

<!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>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 30px;
            font-weight: 800;
            list-style: none;
        }

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

        .banner {
            width: 1200px;
            height: 800px;
            background-color: aqua;
            margin: 0 auto;
            line-height: 800px;
        }

        .content1 {
            width: 1200px;
            height: 500px;
            background-color: orange;
            margin: 0 auto;
            line-height: 500px;
        }

        .content2 {
            width: 1200px;
            height: 500px;
            background-color: pink;
            margin: 0 auto;
            line-height: 500px;
        }

        .content3 {
            width: 1200px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            line-height: 500px;
        }

        .content4 {
            width: 1200px;
            height: 500px;
            background-color: purple;
            margin: 0 auto;
            line-height: 500px;
        }

        .foot {
            width: 100%;
            height: 600px;
            background-color: #000;
        }

        ul {
            width: 100px;
            position: fixed;
            left: 200px;
            top: 50%;
            margin-top: -60px;
            display: none;
        }

        li {
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: normal;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="nav"></div>

    <div class="banner">banner</div>

    <div class="content content1">content1</div>
    <div class="content content2">content2</div>
    <div class="content content3">content3</div>
    <div class="content content4">content4</div>

    <div class="foot"></div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <script>

        // 获取元素
        var content = document.getElementsByClassName("content");
        var list = document.getElementsByTagName("li");
        var floor = document.getElementsByTagName("ul")[0];
        console.log(content[0].offsetTop);

        // 滚动，内容和楼层同步
        document.body.onscroll = function () {
            // 滚动距离
            // console.log(document.documentElement.scrollTop);
            var slength = window.pageYOffset;
            // 内容边界

            
            if (slength < content[0].offsetTop) {
                floor.style.display = "none";
            } else {
                floor.style.display = "block";
                for (var i = 0; i < content.length; i++) {
                    if (slength >= content[i].offsetTop) {
                        siblingFun();
                        list[i].style.backgroundColor = "red";
                    }
                }
            }

        }

        // 排他思想：干掉其他人，只留我自己
        // 封装排他函数
        function siblingFun() {
            for (var i = 0; i < list.length; i++) {
                list[i].style.backgroundColor = "#fff";
            }
        }

        // 楼层点击和内容同步
        for (var i = 0; i < list.length; i++) {

            // 保留 i 值
            list[i].index = i;

            list[i].onclick = function () {
                // 页面滚动距离 = content[i].offsetTop  
                // 事件中的 this 指向事件源
                console.log(this);
                document.documentElement.scrollTop = content[this.index].offsetTop;
            }
        }
    </script>
</body>

</html>