PC端网页特效

Fraser207

于 2024-03-15 17:32:30 发布

阅读量1.8k

点赞数 34

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_56458222/article/details/126835475

版权

本文详细介绍了JavaScript中offset系列、client系列和scroll系列用于获取元素位置、大小和滚动信息的方法，以及鼠标事件如mouseenter和mouseover的区别。同时涵盖了页面滚动事件的处理和动画函数的封装，包括基础动画、封装动画和缓动效果的应用。

摘要由CSDN通过智能技术生成

一、元素偏移量offset系列

1.offest概述

offest翻译过来就是偏移量，我们使用offest系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位元素的位置

获得元素的自身大小（宽度高度）

注意：返回的数值都不带单位

offest系列常用属性：

注意：parentNode返回的是最近一级的父亲，不管有没有定位

2.offset与style区别

获取鼠标在盒子的坐标案例

分析：

1.我们在盒子内点击，想要得到鼠标在盒子左右的距离。

2.首先得到鼠标在页面的坐标（e.pageX,e.pageY)

2.其次得到盒子在页面中的距离（box.offsetLeft,box.offsetRight）

4.用鼠标在页面中的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标

5.如果想移动一下鼠标就得到最新的坐标，使用鼠标移动事件mousemove

<body>
    <div class="green"></div>
    <script>
        var green = document.querySelector('.green');
        green.addEventListener('mousemove',function (e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML= '鼠标x坐标为：'+ x +'鼠标y坐标为：' + y;
        })
    </script>
</body>

3.跳出登陆框（弹出框）（模态框）可拖拽案例：

1.点击弹出层，会弹出模态框，并显示半灰色透明层。

2.点击关闭按钮，可以关闭模态框，并关闭半灰色透明层。

3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。

（1）页面中拖拽原理：鼠标按下 mousedown

并且移动mousemove

松开鼠标mouseup

（2）拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了。

（3）鼠标按下的事件源是最上面一行，就是id为title

（4）鼠标的坐标减去鼠标在盒子内的坐标，就是真正模态框的位置。

（5） 鼠标按下我们要得到鼠标在盒子的坐标。

（6） 鼠标移动就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写道按下事件里面。

4.鼠标松开，可以停止模态框移动，让鼠标移动事件解除。

<body>
    <div class="rukou"><a id = "link" href="javascript:;">点击，登录会员</a></div>
    <div class="login" id="login">
        <div class="login-title">
            <div class="title" id="title">登录会员</div>
            <span><a id = "closeBtn" href="javascript:(0)">X</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label for="">用户名</label>
                <input type="text" placeholder="请输入用户名" class="list-input">
            </div>
            <div class="login-input">
                <label for="">密码</label>
                <input type="password" placeholder="请输入密码" class="list-input">
            </div>
        </div>
        <div class="login-tail">登录会员</div>
    </div>
    <div class="login-bg" id = "bg"></div>
    <script>
        // 1.获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('.title')
        // 2.点击 link 链接让 login 和 mask 显示出来
        link.addEventListener('click',function () {
            login.style.display = 'block';
            mask.style.display = 'block';
        })
        // 3.点击 closeBtn 就隐藏 mask 和 login 
        closeBtn. addEventListener('click',function () {
            login.style.display = 'none';
            mask.style.display = 'none';
        })
        // 4.开始拖拽
        // （1）按下鼠标，立刻获得鼠标在盒子内坐标
        title.addEventListener('mousedown',function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2)鼠标移动时，鼠标在页面坐标 - 鼠标在盒子坐标
            document.addEventListener('mousemove',move)
            function move (e) {
                login.style.left = e.pageX - x +'px';
                login.style.top = e.pageY - x +'px';
            }
            // (3)鼠标弹起，让鼠标移动事件解除
           document.addEventListener('mouseup',function () {
                document.removeEventListener('mousemove',move)
           })
        })
    </script>
</body>

4.放大镜案例

    <style>
        .left {
            position: relative;
            width: 402px;
            height: 402px;
        }
        .left-img {
            width: 400px;
            height: 400px;
            border: 1px solid #fff;
        }
        .mask {
            width: 300px;
            height: 300px;
            background-color: #fede4f;
            opacity: .5;
            position: absolute;
            left: 0;
            top: 0;
        }
        .big {
            border: 1px solid #fff;
            position: absolute;
            left: 400px;
            top: 0px;
            width: 500px;
            height: 500px;
            display: block;
            overflow: hidden;
        }
        .big img {
            position: absolute;
            left: 0;
            top: 0;
            width: 800px;
        }
</style>
</head>
<body>
    <div class="left">
        <img src="./img/little.jpg" alt="" class="left-img">
        <div class="mask"></div>
        <div class="big">
            <img src="./img/big.jpg" alt="" class="bigImg">
        </div>
    </div>
    <SCript>
        var mask = document.querySelector('.mask');
        var left = document.querySelector('.left');
        var big = document.querySelector('.big');
        left.addEventListener('mouseover',function () {
            // 1.鼠标移入，显示黄框,大盒子
            mask.style.display = 'block';
            big.style.display = 'block';
        })
        left.addEventListener('mouseout',function () {
            // 2.鼠标离开，黄框隐藏
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        left.addEventListener('mousemove',function (e) {
            // 3.鼠标移动，获得鼠标在盒子的位置，就是鼠标在页面的位置 - 盒子距离页面左端和顶部的距离
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // 把鼠标的坐标减去蒙层的一半，实现鼠标居于蒙层中间
            var maskX = x - mask.offsetWidth / 2;   //鼠标x坐标
            var maskY = y - mask.offsetHeight / 2;  //鼠标y坐标
            var moves = left.offsetWidth - mask.offsetWidth;  // 蒙层最大移动距离
            if (maskX <= 0 ) {
                maskX = 0;
            } else if (maskX >= moves) {
                maskX = moves;
            }
            if (maskY <= 0 ) {
                maskY = 0;
            } else if (maskY >= moves) {
                maskY = moves;
            }
            mask.style.left = maskX+ 'px';
            mask.style.top = maskY+ 'px';
            // 4.实现蒙层和大图的互联效果。蒙层移动距离/蒙层移动最大距离 = 大图移动距离/大图移动最大距离 
            // 大图移动距离 = 蒙层移动距离 * 大图移动最大距离 / 蒙层最大移动距离
            var bigImg = document.querySelector('.bigImg');
            var bigMax = bigImg.offsetWidth - big.offsetWidth;   //大图移动最大距离
            var bigX = maskX * bigMax / moves;
            var bigY = maskY * bigMax / moves;
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';
        })
    </SCript> 
</body>

二、元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列相关属性可以动态得到该元素的边框大小，元素大小等。

三、元素滚动scroll系列

1.元素scroll属性

scroll翻译过来就是滚动的，我们为使用scroll系列的相关属性可以动态的得到元素的大小，滚动距离等。

2.页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时就会触发onscroll事件。

仿淘宝固定右侧边栏案例：

需求：1.原先侧边栏是绝对定位

2.当页面滚动到一定位置，侧边栏改为固定定位

3.页面继续滚动，会让返回顶部显示出来

分析：1.需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document

2.滚动到某个位置，就是判断页面被卷上去的值

3.页面被卷去的头部：可以通过window.pageYOffset获得。如果是被卷去的左侧 1 window.pageXOffset

4.注意：元素被卷去的头部是 element.scrollTop，如果页面头部被卷去则是 1 12 1 window.pageYOffset

    <style>
        .slider-bar {
            position: absolute;
            right: 97px;
            top: 300px;
            background-color: #008c8c;
            width: 64px;
            height: 150px;
        }
        .goBack {
            position: absolute;
            bottom: 0;
            left: 0;
            display: none;
        }
        .header {
            width: 90%;
            height: 200px;
            background-color: purple;
        }
        .banner {
            width: 90%;
            height: 300px;
            background-color: pink;
        }
        .main {
            width: 90%;
            height: 1000px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header">头部区域</div>
    <div class="banner">banner区域</div>
    <div class="main">主体区域</div>
    <script>
        // 1.获取元素
        var sliderBar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // bannerTop就是banner被卷去的头部的大小
        var bannerTop = banner.offsetTop;
        // 当侧边栏固定定位后应该变化的数值
        var sliderBarTop = sliderBar.offsetTop - bannerTop;
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2.页面滚动事件
        document.addEventListener('scroll',function () {
            // 页面被卷去的头部   window.pageYOffset
            // 3.当页面被卷去的头部大于等于banner被卷去的头部时，，侧边栏改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderBar.style.position = 'fixed';
                sliderBar.style.top = sliderBarTop + 'px';
            } else {
                sliderBar.style.position = 'absolute';
                sliderBar.style.top = 300 + 'px';
            }
            // 4.当页面滚动到主体区域时，显示返回顶部
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
    </script>
</body>

3.三大系列对比

他们主要用法：
1.offset系列常用于获得元素位置 offsetLeft offsetTop

2.cllient经常用于获取元素大小 cllientWidth cllientHeight

3.scroll经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动要通过 window.pageXOffset 获得

4.mouseenter和mouseover的区别

mouuseenter鼠标事件

当鼠标移动到元素上就会触发mouseenter事件

类似mouseover,他们看两者之间的差别是：

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只是经过自身盒子触发

原因是：mouseenter不会冒泡

经常和mouseenter搭配使用的是mouseleave（它同样也不会冒泡）

四、动画函数封装

1.简单动画函数

核心原理：通过定时器setInteral()不断移动盒子

实现步骤：

1.获得当前盒子位置

2.让盒子在当前位置上移动一个距离

3.用定时器不断让它重复这个操作

4.加一个结束定时器的条件

5.注意此元素需要添加定位，才能使用element.style.left

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #008c8c;
            position: relative;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(function () {
            if (div.offsetLeft > 800 ) {
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 6 + 'px';
        },30)
    </script>
</body>

2.动画函数简单封装：

注意需要传递两个参数，动画对象和移动的距离。

    <script>
        function animate (obj,distance) {
            var timer = setInterval(function () {
                if (div.offsetLeft > distance ) {
                    clearInterval(timer);
                 }
               div.style.left = div.offsetLeft + 6 + 'px';
            },30)
        }
        var div = document.querySelector('div');
        animate(div,500)
    </script>

3.动画函数给不同元素记录不同的定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同元素使用不同定时器（自己专门用自己的定时器）

核心原理：利用JS是一门动态语言，可以方便的给当前对象添加属性。

    <style>
        .dad {
            width: 100px;
            height: 100px;
            background-color: #008c8c;
            position: relative;
        }
        .mom {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <button>Let's go</button>
    <div class="dad"></div>
    <div class="mom"></div>
    <script>
        function animate (obj,distance) {
            obj.timer = setInterval(function () {
                if (obj.offsetLeft > distance ) {
                    clearInterval(obj.timer);
                 }
               obj.style.left = obj.offsetLeft + 6 + 'px';
            },100)
        }
        var dad = document.querySelector('.dad');
        var mom = document.querySelector('.mom');
        var btn = document.querySelector('button');
        animate(dad,500)
        btn.addEventListener('click',function () {
            animate(mom,500)
        })
    </script>

4.缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

2.核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长

3.停止的条件：当盒子的位置 = 目标位置就停止定时器

4.注意步长值需要取整

    <script>
        function animate (obj,distance) {
            obj.timer = setInterval(function () {
                // 步长值定义在定时器里面
                var speed = (distance - obj.offsetLeft) / 10;
                if (obj.offsetLeft > distance ) {
                    clearInterval(obj.timer);
                 }
               obj.style.left = obj.offsetLeft + speed + 'px';
            },100)
        }
        var dad = document.querySelector('.dad');
        var mom = document.querySelector('.mom');
        var btn = document.querySelector('button');
        animate(dad,500)
        btn.addEventListener('click',function () {
            animate(mom,500)
        })
    </script>

Fraser207

关注

34
点赞
踩
42

收藏

觉得还不错? 一键收藏
1
评论
PC端网页特效

offest翻译过来就是偏移量，我们使用offest系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位元素的位置获得元素的自身大小（宽度高度）注意：返回的数值都不带单位offest系列常用属性：注意：parentNode返回的是最近一级的父亲，不管有没有定位。
复制链接

扫一扫