JS 网页特效

最新推荐文章于 2024-09-03 09:51:41 发布

LyaJpunov

最新推荐文章于 2024-09-03 09:51:41 发布

阅读量553

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_43903639/article/details/121731807

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细解析了CSS中的offset系列属性，包括元素与定位父级的距离、自身大小，以及offset与style的区别。同时介绍了client系列用于获取未包含边框的尺寸，scroll系列用于元素实际滚动范围。通过实例展示了如何使用这些属性实现动画效果，如滚动和缓动控制。

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

元素偏移量offset系列

获得元素距离带有定位父元素的位置，也就是说元素必须要有定位

获得元素自身的大小

返回数值都不带单位

offset属性	作用
`element.offsetParent`	返回该元素带有定位的父级元素，如果父级没有定位返回body
`element.offsetTop`	返回元素相对带有定位的父元素上方偏移，父级没有定位返回body
`element.offsetLeft`	返回元素相对带有定位的父元素左侧偏移，父级没有定位返回body
`element.offsetWidth`	返回自身包括padding，边框，内容区的宽度，返回数值都不带单位
`element.offsetHeight`	返回自身包括padding，边框，内容区的高度，返回数值都不带单位

offset和style的区别

style只能得到行内样式表的样式，offset可以得到外部样式表的样式

style得到的是带单位的字符串，offset得到的是数值

style得到的值不包含padding，offset包含padding，边框

style既可以获取数值也可以写入，offset只能获取不能写入

获取鼠标在盒子内的坐标

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

元素偏移量client系列

client属性	作用
`element.clientTop`	返回元素上边框大小
`element.clientLeft`	返回元素左边框大小
`element.clientWidth`	返回自身包括padding，内容区的宽度，不含边框，返回值不带单位
`element.clientHeight`	返回自身包括padding，内容区的高度，不含边框，返回值不带单位

元素滚动scroll系列

scroll是我们元素的实际大小，内容超出会算超出去的内容（overflow:auto）

scroll属性	作用
`element.scrollTop`	返回被卷去的上侧距离，返回数值不带单位
`element.scrollLeft`	返回被卷去的左侧距离，返回数值不带单位
`element.scrollWidth`	返回自身实际宽度，不含边框，返回数值不带单位
`element.scrollHeight`	返回自身实际高度，不含边框，返回数值不带单位

立即执行函数

不需要调用，立马就能执行的函数

(function(){})()或者(function(){}())，第二个小括号可以看做调用函数，括号内可以传递参数

立即执行函数创建了一个独立的函数作用域

缓动动画函数

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

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

        .box {
            position: absolute;
            left: 300px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        span {
            display: block;
            position: absolute;
            top: 200px;
            left: 0px;
            width: 51px;
            height: 50px;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // obj:目标对象 
        // target:目标位置
        function animate(obj, target) {
            // 给对象添加一个timer的定时器属性,让元素只有一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                if (obj.offsetLeft == target) {
                    // 停止动画本质上是关掉定时器
                    clearInterval(obj.timer);
                }
                else {
                    // 缓动动画，向上取整
                    var step = (target - obj.offsetLeft) / 20
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }, 30);
        }
        var div = document.querySelector('div');
        animate(div, 0);
    </script>
</body>

</html>

引入外部JS文件

外部文件./animate.js

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }   
        else {
            var step = (target - obj.offsetLeft) / 20
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 30);
}

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

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

        span {
            display: block;
            position: absolute;
            top: 200px;
            right: 0px;
            width: 50px;
            height: 50px;
            background-color: red;
            line-height: 50px;
            font-size: 20px;
        }

        .con{
            padding-right: 50px;
            position: absolute;
            top: 200px;
            right: -150px;
            width: 150px;
            height: 50px;
            background-color: royalblue;
            line-height: 50px;
            text-align: center;
            z-index: -1;
        }
        .sliderbar{
            position: absolute;
            top: 200px;
            right: 0px;
            width: 200px;
            height: 50px;
        }
    </style>
    <script src="./animate.js"></script>
</head>

<body>
    <div class="sliderbar">
        <span><b><-</b></span>
        <div class="con">出来啦</div>
    </div>
    <script>
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');
        sliderbar.addEventListener('mouseenter',function(){
            con.style.display = 'block';
            animate(con,0,function(){
                sliderbar.children[1].innerHTML='回去啦';
            });
        })
        sliderbar.addEventListener('mouseleave',function(){
            animate(con,150,function(){
                con.style.display = 'none';
            });
        })
    </script>
</body>

</html>

常见案例

网页轮播图

常叫焦点图，是比较常见的网页特效

返回顶部

window.scroll(x,y)将页面滚动到相应的位置

本地存储

数据存储在本地浏览器，刷新不会对视数据，只能存储JSON字符串

`window.sessionStorage`

可以存储5mb，生命周期为关闭浏览器窗口

// 存储数据
sessionStorage.setItem(key,value);
// 获取数据
sessionStorage.getItem(key);
// 删除数据
sessionStorage.removeItem(key);
// 清除所有数据
sessionStorage.ckear();

`window.localStorage`

可以存储20mb，生命周期永久除非手动删除

// 存储数据
localStorage.setItem(key,value);
// 获取数据
localStorage.getItem(key);
// 删除数据
localStorage.removeItem(key);
// 清除所有数据
localStorage.ckear();

LyaJpunov

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录