JavaScript进阶之PC端

最新推荐文章于 2024-05-08 14:52:03 发布

春风化雨丶

最新推荐文章于 2024-05-08 14:52:03 发布

阅读量719

点赞数

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

本文链接：https://blog.csdn.net/weixin_43984150/article/details/124630242

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

元素偏移量offset系列

offset概述

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

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

offset系列常用属性

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

offset与style区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width	style.width获得不包含padding和border的值
属性是只读属性,只能获取不能赋值	style.width是可读写属性,可以获取也可以赋值
所以,想要获取元素大小位置,用offset合适	如果想要给元素更改值,则需要用style改变

元素可视区client系列

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

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

淘宝flexible.js源码分析

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

a标签的超链接
F5或者刷新按钮（强制刷新）
前进后退按钮

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

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

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

元素scroll系列

元素scroll系列属性

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

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

在这里插入图片描述
页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧 window.pageXOffset

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

其实这个值可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了

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

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

声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 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

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding,边框,内容区的宽度,返回数值不带单位
element.clientWidth	返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位
element.scrollWidth	返回自身实际的宽度,不含边框,返回数值不带单位

在这里插入图片描述

mouseenter和mouseover的区别

mouseenter 鼠标事件

当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover，它们两者之间的差别
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

动画函数封装

动画实现原理

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

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

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

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

    <script>
        //var obj = {};
        //obj.name ='andy';obj默认为对象
        //简单动画函数封装obj目标对象
        //给不同元素指定不同的定时器
        function animate(obj, target) {
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    clearInterval(obj.timer);
                } else {
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }, 10)
        }
        var div = document.querySelector('div');
        animate(div, 300);
        var span = document.querySelector('span');
        animate(span, 400);
    </script>

缓动动画

<body>
    <button class="btn500">点击夏雨荷才走500</button>
    <button class="btn800">点击夏雨荷才走800</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        // var obj = {};
        // obj.name = 'andy';
        // 简单动画函数封装obj目标对象 target 目标位置
        // 给不同的元素指定了不同的定时器
        function animate(obj, target,callback) {
            //console.log(callback);callback = function() {} 调用时callback()
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //步长 取整
                // var step = Math.ceil(((target - obj.offsetLeft) / 10)) ;
                var step = (target - obj.offsetLeft) / 10;
                //倒着走取整逻辑
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    //回调函数写到定时器结束里面
                    if (callback) {
                        callback();
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
        // 调用函数
        animate(div, 500);
        btn500.addEventListener('click', function () {
            animate(span, 500);
        });
        btn800.addEventListener('click', function () {
            animate(span, 800,function(){
                span.style.backgroundColor = 'red';
            });
        });
    </script>
</body>

动画函数添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置。

动画函数封装

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

春风化雨丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进阶之PC端

元素偏移量offset系列offset概述offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等.获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset系列常用属性offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素,如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上
复制链接

扫一扫