【07】JavaScript：11-元素偏移量 offset 系列、元素可视区 client 系列、元素滚动 scroll 系列、动画函数封装

最新推荐文章于 2022-11-16 18:41:08 发布
最新推荐文章于 2022-11-16 18:41:08 发布
阅读量740 收藏 5
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Satan_Devil/article/details/106677447
版权

文章目录

day05 - Web APIs

学习目标:

能够说出常见 offset 系列属性的作用

能够说出常见 client 系列属性的作用

能够说出常见 scroll 系列属性的作用

能够封装简单动画函数

1.1.元素偏移量 offset 系列

1.1.1 offset 概述

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

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

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

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

(img-wqeA1Nrb-1591792948540)(images\图片1.png)]

(img-UBotf1cI-1591792948543)(images\图片2.png)]

1.1.2 offset 与 style 区别

offset

  • offset 可以得到任意样式表中的样式值

  • offset 系列获得的数值是没有单位的

  • offsetWidth 包含padding+border+width

  • offsetWidth 等属性是只读属性，只能获取不能赋值

  • 所以，我们想要获取元素大小位置，用offset更合适

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
    </script>
</body>
style

  • style 只能得到行内样式表中的样式值

  • style.width 获得的是带有单位的字符串

  • style.width 获得不包含padding和border 的值

  • style.width 是可读写属性，可以获取也可以赋值

  • 所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

<body>
    <div class="box" style="width: 200px;"></div>
    <script>
        // offset与style的区别
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);
        console.log(box.style.width);
        // box.offsetWidth = '300px';
        box.style.width = '300px';
    </script>
</body>

1.1.3 案例：获取鼠标在盒子内的坐标

  1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
  2. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
  3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
  4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标
  5. 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动
<body>
    <div class="box"></div>
    <script>
        // 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
        // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY）
        // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
        // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
        })
    </script>
</body>

1.1.4 案例：模态框拖拽

弹出框，我们也称为模态框。

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

​ 2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。

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

​ 4.鼠标松开，可以停止拖动模态框移动

1.1.5. 案例分析:

  1. 点击弹出层， 模态框和遮挡层就会显示出来 display:block;
  2. 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;
  3. 在页面中拖拽的原理：鼠标按下并且移动， 之后松开鼠标
  4. 触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup
  5. 拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了
  6. 鼠标按下触发的事件源是最上面一行，就是 id 为 title
  7. 鼠标的坐标减去 鼠标在盒子内的坐标， 才是模态框真正的位置。
  8. 鼠标按下，我们要得到鼠标在盒子的坐标。
  9. 鼠标移动，就让模态框的坐标 设置为 ：鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。
  10. 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-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  让mask 和login 显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>

1.1.6 案例：仿京东放大镜

  1. 整个案例可以分为三个功能模块
  2. 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
  3. 黄色的遮挡层跟随鼠标功能。
  4. 移动黄色遮挡层，大图片跟随移动功能。

1.1.7. 案例分析:

  1. 黄色的遮挡层跟随鼠标功能。
  2. 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
  3. 首先是获得鼠标在盒子的坐标。
  4. 之后把数值给遮挡层做为left 和top值。
  5. 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
  6. 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
  7. 遮挡层不能超出小图片盒子范围。
  8. 如果小于零，就把坐标设置为0
  9. 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
  10. 遮挡层的最大移动距离：小图片盒子宽度 减去 遮挡层盒子宽度
window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';
    })
})

1.2. 元素可视区 client 系列

1.2.1 client概述

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

(img-8AbszByZ-1591792948556)(images\图片3.png)]

(img-5ggqqAoQ-1591792948559)(images\图片4.png)]

<body>
    <div></div>
    <script>
        // client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
        var div = document.querySelector('div');
        console.log(div.clientWidth);
    </script>
</body>

1.2.2. 淘宝 flexible.js 源码分析

立即执行函数 (function(){})() 或者 (function(){}())

主要作用： 创建一个独立的作用域。 避免了命名冲突问题

<body>
    <script>
        // 1.立即执行函数: 不需要调用，立马能够自己执行的函数
        function fn() {
            console.log(1);

        }
        fn();
        // 2. 写法 也可以传递参数进来
        // 1.(function() {})()    或者  2. (function(){}());
        (function(a, b) {
            console.log(a + b);
            var num = 10;
        })(1, 2); // 第二个小括号可以看做是调用函数
        (function sum(a, b) {
            console.log(a + b);
            var num = 10; // 局部变量
        }(2, 3));
        // 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
    </script>
</body>

像素比

<body>
    <script>
        // console.log(window.devicePixelRatio);
        window.addEventListener('pageshow', function() {
            alert(11);
        })
    </script>
    <a href="http://www.itcast.cn">链接</a>
</body>

下面三种情况都会刷新页面都会触发 load 事件。

1.a标签的超链接

2.F5或者刷新按钮（强制刷新）

3.前进后退按钮

但是 火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件

注意这个事件给window添加。

(function flexible(window, document) {
    // 获取的html 的根元素
    var docEl = document.documentElement
        // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size  设置我们body 的字体大小
    function setBodyFontSize() {
        // 如果页面中有body 这个元素 就设置body的字体大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
            // 的字体大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我们重新加载页面触发的事件
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

1.3.元素滚动 scroll 系列

1.3.1. scroll 概述

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

(img-uPVpdI4O-1591792948561)(images\图片5.png)]

(img-TYewPEUM-1591792948565)(images\图片6.png)]

<body>
    <div>
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
    </div>
    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滚动事件当我们滚动条发生变化会触发的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);

        })
    </script>
</body>

1.3.2. 页面被卷去的头部

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

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

  1. 原先侧边栏是绝对定位
  2. 当页面滚动到一定位置，侧边栏改为固定定位
  3. 页面继续滚动，会让 返回顶部显示出来

1.3.4.案例分析:

  1. 需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document
  2. 滚动到某个位置，就是判断页面被卷去的上部值。
  3. 页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset
  4. 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
  5. 其实这个值 可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

        })
    </script>
</body>

</html>

1.3.5.页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

  1. 声明了 DTD，使用 document.documentElement.scrollTop
  2. 未声明 DTD，使用 document.body.scrollTop
  3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持
function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left

1.4. 三大系列总结

(img-AbXdnzyf-1591792948567)(images\图片7.png)]

他们主要用法：

1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

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

4.注意页面滚动的距离通过 window.pageXOffset 获得

1.5. mouseenter 和mouseover的区别

  • 当鼠标移动到元素上时就会触发mouseenter 事件
  • 类似 mouseover，它们两者之间的差别是
  • mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
  • 之所以这样，就是因为mouseenter不会冒泡
  • 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseenter', function() {
            console.log(11);

        })
    </script>
</body>

1.6. 动画函数封装

1.6.1. 动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位，才能使用element.style.left
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 动画原理
        // 1. 获得盒子当前位置  
        // 2. 让盒子在当前位置加上1个移动距离
        // 3. 利用定时器不断重复这个操作
        // 4. 加一个结束定时器的条件
        // 5. 注意此元素需要添加定位， 才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
    </script>
</body>
</html>

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

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        // var obj = {};
        // obj.name = 'andy';
        // 简单动画函数封装obj目标对象 target 目标位置
        // 给不同的元素指定了不同的定时器
        function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        // 调用函数
        animate(div, 300);
        btn.addEventListener('click', function() {
            animate(span, 200);
        })
    </script>
</body>
</html>

1.7. 每日作业-Web APIs第05天

1 - 模态框拖拽

  • 题目描述

    把今天课上讲的模态框拖拽写一遍

  • 训练目标

    能够独自完成模态框拖拽的制作

  • 训练提示

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

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

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

    4.鼠标松开，可以停止拖动模态框移动

  • 参考方案

    显示模态框拖拽案例

2 - 仿京东放大镜

  • 题目描述

    把课上的返回仿京东放大镜写一遍

  • 训练目标

    能够独立完成仿京东放大镜案例

  • 训练提示

    1. 整个案例可以分为三个功能模块
    2. 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能
    3. 黄色的遮挡层跟随鼠标功能。
    4. 移动黄色遮挡层，大图片跟随移动功能。

3 - 仿淘宝固定右侧侧边栏

  • 题目描述

把课上的仿淘宝固定右侧侧边栏写一遍

  • 训练目标

能够独立完成仿淘宝固定右侧侧边栏案例

  • 训练提示
  1. 原先侧边栏是绝对定位
  2. 当页面滚动到一定位置，侧边栏改为固定定位
  3. 页面继续滚动，会让 返回顶部显示出来

4 - 封装简单动画函数

  • 题目描述

    把课上的封装动画函数写一遍

  • 训练目标

    能够理解动画函数的封装步骤

  • 训练提示

    1. 获得盒子当前位置
    2. 让盒子在当前位置加上1个移动距离
    3. 利用定时器不断重复这个操作
    4. 加一个结束定时器的条件
    5. 注意此元素需要添加定位，才能使用element.style.left

1.8. 随堂测验

考点：offset系列属性

单选题

以下关于offset系列属性和style属性的说法，正确的是()

A.通过style属性获取到的样式结果是字符串类型，而通过offset系列获取到的属性值是数字类型。~
B.offset系列属性和style属性一样，都可以获取到元素的行内样式。~
C.style系列属性只能获取元素的行内样式，offset系列属性能获取到元素的所有样式。~
D.以上说法都不正确。

答案: A

解析: 本题考查的是offset系列属性的使用。答案B和C错误，offset系列属性用来获取元素显示的效果，但是并不是所有的样式都能够获取到，只能获取到宽度，高度，左右距离等。

难度: ☆☆

考点：offset系列属性

单选题

下列关于offsetWidth和offsetHeight的说法，正确的是()

A.这两个属性用来表示内容的大小，不包括边框和内边距。~
B.获取到结果是数字类型，方便计算。计算完成以后的值，可以再使用offsetWidth和offsetHeight重新设置给元素。~
C.这两个属性值的结果是字符串类型的数据，默认单位是px.~
D.这两个属性是只读属性。

答案: D

解析: 本题考查的是offset系列属性的使用。答案A错误，offsetWidth和offsetHeight表示的是盒子的大小，包括边框和内边距；答案B错误，这两个属性是只读属性，不能被修改；答案C错误，这两个属性获取到的结果是数字类型，不是字符串类型。

难度: ☆☆

考点：offset系列属性

多选题

下列关于offsetParent的说法，正确的是()

A.offsetParent获取到的是元素的父元素。~
B.offsetParent属性和parentNode属性的含义一样。~
C.offsetParent属性用来获取离这个元素最近的绝对定位父元素。~
D.以上说法都错误。

答案: D

解析: 本题考查的是offset系列属性的使用。答案C错误，offsetParent获取的是离这个元素最近的有定位的父元素，不管这个父元素是绝对定位还是相对定位。所以A和B也错误

难度: ☆☆☆

忘尘 丶莫负
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scroll-animation:根据滚动位置对元素进行动画处理
04-28
滚动动画根据滚动位置对元素进行动画处理。 受和启发。 哦，不，为什么还要另一个视差脚本？ 我们真的需要吗？ 我找不到适合我需要的npm软件包： 动画任何DOM属性的能力使用进行表演暂时挂起以最大程度地减少负载...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
元素偏移量offset
m0_62962469的博客
04-03 441
offset系列常用元素属性： offset系列属性 作用 Element.offsetParent 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body Element.offsetTop 返回元素相对带有定位父元素上方的偏移 Element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 Element.offseWidth 返回自身包括边框，内容区的宽度，返回数值不带单位 Element.offseHeight 返回
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
sinat_41212418的博客
11-01 6251
偏移量（offset dimension） 偏移量：包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度，宽度决定，包括所有内边距，滚动条和边框大小（注意，不包括外边距）。 以下4个属性可以获取元素的偏移量 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（可见的），水平滚动条的高度，上边框高度和下边框高度。 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（可见的），垂直滚动条的宽度，左边框宽度和右边框宽度。 3: off
7.元素偏移量笔记
weixin_43324141的博客
04-17 298
**1.1. **元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离 父元素的位置（带有定位父元素） 如果没有定位 则以 body 为准 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 <style> ...
元素偏移量offset系列
Nieyigo的博客
10-12 1203
2020年10月11日真是痛苦的一天 元素偏移量offset系列 offset概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置(便宜)、大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意：返回的数值都不带单位 offset系列常用属性 offset与style区别 案例：获取鼠标在盒子内的坐标 <body> <div class="box"></div> <scrip
元素偏移量 offset 系列
JJ_Smilewang的博客
06-21 1071
offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 (1) 获得元素距离带有定位父元素的位置 (2) 获得元素自身的大小（宽度高度） (3) 注意： 返回的数值都不带单位offset 系列常用属性有：（1）offset ① offset 可以得到任意样式表中的样式值 ② offset 系列获得的数值是没有单位的 ③ offsetWidth、offsetHeight包含padding+border+width ④ offsetWidth、
animate-scroll-js:轻量级JavaScript库可滚动到没有jQuery的元素
05-14
轻量级JavaScript库，可在没有jQuery的情况下将垂直滚动动画化为指定元素。 点击进行演示 用法 animateScroll ( target , duration , easing , padding , align , onFinish ) target指定DOM元素或滚动到的页面...
Scroll-Animation：向下滚动下一个元素时将出现滚动动画
02-15
在网页设计中，滚动动画（Scroll Animation）是一种增强用户体验的常见技术，特别是在现代网页和单页应用程序（SPA）中。这种技术允许用户在向下滚动页面时，内容以平滑、动态的方式呈现，增加了视觉吸引力。本文将...
stenciljs-virtual-scroll：具有不同元素高度的虚拟滚动Web组件
02-06
Stenciljs-虚拟滚动 这是一个使用Stencil构建独立的Virtual Scroll Web组件的项目。 项目包含两个组件的集合： 1.虚拟滚动（VirtualScrollWebComponent）。 此组件以填充视口所需的高度呈现具有不同高度的元素子集 ...
jQuery简单实现仿京东商城的左侧菜单效果代码
01-19
本文实例讲述了jQuery简单实现仿京东商城的左侧菜单效果代码。分享给大家供大家参考。具体如下： 这是一款挺漂亮的左侧菜单效果，基于jQuery插件，但是还没有真正的完善，有些闪动，也希望高人指点修正。仿京东商城风格的菜单。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DT
仿Android建行客户端中可滑动半圆形按钮
11-04
仿Android建行客户端中可滑动半圆形按钮
仿京东商品筛选效果
04-12
京东商城商品筛选效果,js已经写到页面上了。
JS html元素以及偏移量
boonyaxnn的博客
04-08 1726
一、html元素 var html = document.documentElement; 1、获取视口的宽高 console.log('width',html.clientWidth); console.log('height',html.clientHeight); 2、获取包含滚动条视口宽高 滚动条的宽度是17px console.log('包含滚动条width',wind...
元素偏移量offset的学习
m0_51528800的博客
05-18 1609
元素偏移量offset的学习 元素偏移量offset的学习一、offset概述offset与style的区别 一、offset概述 offset就是偏移量，使用offset系列相关属性可以动态地得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素地位置； 获得元素自身的大小（宽度、高度）； 返回的数值都不带单位。 offset系列常用属性： 举例： <!DOCTYPE html> <html lang="en"> <head> <meta
页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理...
weixin_30471065的博客
11-25 271
鼠标事件都是在特定位置发生的，我们可以通过event事件对象的各种属性来获得事件发生的坐标位置，有相对于视口的，有相对于整个文档的，同样页面元素的位置也有相对视口的，也有滚动后的，这些都比较容易混淆，所以整理在这里，备忘，待查。 1.客户区坐标位置（clientX/clientY） 我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中...
元素可视区 client 系列
qq_41033308的博客
09-11 80
元素可视区 client 系列 client概述： client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 具体如图所示： ...
获取元素偏移以及大小
lxllxl211的博客
11-16 375
offset就是偏移量 用offset系列的相关属性可以动态的得到该元素的位置（偏移）、大小 1.获得元素距离 带有定位的父元素的位置 2.获得元素自身的大小（宽度、高度） 3.返回的元素不带单位 element.offsetTop返回元素距离顶部的距离 element.offsetleft返回元素距离左边的距离
获取元素的偏移量
weixin_34194317的博客
04-21 564
1. parentNode:父亲节点 HTML结构层级关系中的上一级元素 center.parentNode 2. offsetParent:父级参照物 在通一个平台中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系） 一般来说一个页面中所有元素的腹肌参照物都是body 通过设置 position: relative;position: absolute;...
解释一下代码： .container { height: calc(100vh - 50px); /* 50px是其他元素占据的高度 */ overflow-y: scroll; } .content { flex: 1; /* 设置内容区域占满剩余空间 */ overflow-y: auto; /* 设置内容区域为可滚动 */ } /* 调整滚动条样式 */ .content::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5; } .content::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; } .content::-webkit-scrollbar-thumb:hover { background-color: #999; } .content::-webkit-scrollbar-track { background-color: #f5f5f5; }
最新发布
06-10
这段代码是用来实现一个可滚动的内容区域，其中： - `.container` 是一个容器元素，设置了高度为视口高度减去其他元素占据的高度，并且设置了垂直方向的滚动条。 - `.content` 是内容区域元素，设置了弹性布局，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值