JavaScript网页特效

最新推荐文章于 2025-03-09 17:00:33 发布

檬是柠檬的檬826

最新推荐文章于 2025-03-09 17:00:33 发布

阅读量736

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_62343228/article/details/123588767

版权

本文介绍了JavaScript中关于元素定位的offset属性，通过案例展示了如何获取元素的偏移量及鼠标在元素内的坐标。同时，讲解了scroll系列属性的应用，如获取元素滚动距离，并通过示例实现了固定侧边栏的效果，当页面滚动时，侧边栏会根据滚动位置进行定位调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素偏移量offset系列

1.offset概述

offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。

在这里插入图片描述

2.【案例】获取鼠标指针在盒子内的坐标

在这里插入图片描述

<style>
    #box{
        position: absolute;
        left: 50px;
        top: 20px;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        //1.输出box的宽度和高度
        console.log("宽度：",box.offsetWidth);
        console.log("高度：",box.offsetHeight);
        //2.给box绑定鼠标移动的事件
        box.addEventListener('mousemove',function(e){
            //2.1 获取box的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;
            // console.log("偏移量：("+left+","+top+")");
            //2.2 计算鼠标指针在box中的坐标
            var x =  e.pageX - left;
            var y =  e.pageY - top;
            console.log("x轴坐标："+x+",y轴坐标："+y);
        })
    </script>
</body>

3.offset与style的区别

在这里插入图片描述

元素可视区client系列

client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。
在这里插入图片描述

元素滚动scroll系列

1.scroll概述

scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。
在这里插入图片描述
注意：返回数值不带单位。

2.【案例】固定侧边栏效果

在这里插入图片描述

<style>
    .w{
        width: 70%;
        margin: 0 auto;
        margin-top: 10px;
    }
    .header{
        height: 100px;
        background-color: red;
    }
    .banner{
        height: 200px;
        background-color: pink;
    }
    .main{
        height: 1267px;
        background-color: orange;
    }
    .slider-bar{
        width: 70px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        left: 85%;
        top: 330px;
    }
    .goBack{
        display: none;
        position: absolute;
        bottom: 0;
    }
</style>
<body>
    <div class="header w">头部区域</div>
    <div class="banner w">bananer区域</div>
    <div class="main w">主体区域</div>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <script>
        //1.获取元素
        var header = document.querySelector(".header");
        var banner = document.querySelector(".banner");
        var slider = document.querySelector(".slider-bar");
        var goBack = document.querySelector(".goBack");
        //2.给goBack注册click事件
        goBack.addEventListener("click",function(){
            window.scrollTo(0,0);
        })
        //3.给页面注册scroll滚动事件
        document.addEventListener('scroll',function(){
            //3.1获取页面顶部和左侧卷起的距离
            slider.style.top = window.pageYOffset;
            if(window.pageYOffset>(header.scrollHeight+banner.scrollHeight + 30)){
                goBack.style.display = 'block';
                slider.style.position = 'fixed';
                // slider.style.left = '85%';
                slider.style.top = '0px';
            }else{
                slider.style.position = 'absolute';
                // slider.style.left = '85%';
                slider.style.top = (header.scrollHeight+banner.scrollHeight + 30)+'px';
                goBack.style.display = 'none';
            }
        })
    </script>
</body>