js基础之动画

最新推荐文章于 2024-06-30 15:38:14 发布

阿牛乐

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量102

点赞数

分类专栏： javaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_47976412/article/details/129807992

版权

javaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    获取宽高的三大系列 
元素偏移量offset系列属性 
  element.offsetParent 返回作为该元素带有定位的父级元素，没有定位返回body（区别于element.parentNode 返回亲爸爸）
element.offsetTop 返回相对带有定位父元素上方的偏移量
element.offsetLeft 返回相对带有定位父元素左边框的偏移量
element.offsetWidth 返回盒子宽度 无单位 水平宽度包括padding和border
element.offsetHeight 返回盒子高度 无单位 垂直高度(包含border,padding)
 
client系列 
  element.clientTop 上边框的大小
element.clientLeft 左边框的大小
element.clientWidth 元素的宽包括paddding、内容区的高度、不包括边框、不带单位
element.clientHeight 元素的高包括padding、内容区的高度
 
立即执行函数 
  不需要调用，立马能够自己执行的函数：(function(){}())、(function(){})()
最大的作用：独立创建了一个作用域，都是局部变量
 
(window).pageshow事件 
  三种情况刷新触发load事件： 
    a标签
F5或刷新按钮
前进后退
特殊：火狐有往返缓存，用load不行，得改用pageshow
 
 
resize事件：页面大小发生变化
元素scroll系列属性 
  scrollHeight 内容高度，不含边框
scrollWidth 实际宽度，不含边框
scrollTop 离可视区上方里的距离（被卷去上侧的距离）
scrollLeft 离可视区左侧里的距离（被卷去左侧的距离）
scroll事件 页面滚动
页面被卷去的头部，可以通过window.pageYOffset获得
对比：元素被卷去的头部，可以通过element.scrollTop获得
 
 
三大系列总结 
区别： 
  element.offsetWidth 返回padding、边框、内容区的宽度
element.clientWidth 返回padding、内容区的宽度、不含边框
element.scrollWidth 返回自身实际的宽度、不含边框
 
用法 
  offset系列：获取元素位置
client系列：获取元素大小
scroll系列：获取滚动的距离
页面滚动距离通过window.pageXOffset
 
 
动画 
动画原理：通过定时器setInterval()不断移动盒子的位置
动画函数简单封装：传两个参数：动画对象obj、移动到的距离target
动画函数给不同元素记录不同定时器// 核心：js一门动态语言，方便给当前对象添加属性
<head>
	<style>
        div {
            position: absolute;
            left: 0;
            height: 200px;
            width: 200px;
            background-color: pink;
        }

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

<body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
    // 动画函数封装
        // var obj = {};
        // obj.name = 'andy'
        // 给不同的元素记录不同的定时器
        function animate(obj, target){
            //不断按击按钮，元素的速度会越来越快，因为开启了太多的定时器
            //只设置一个定时器
            //解决方案：清除以前的定时器，留下当前一个定时器
            clearInterval(obj.timer)
            obj.timer = setInterval(function () {
            if(obj.offsetLeft >= target){
                //停止动画的本质是清除定时器 
                clearsetInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 5 + 'px';
        }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var button = document.querySelector('button');
        //调用函数
        animate(div, 300); 
        button.addEventListener('click', function(){
            animate(span, 400);
        })
    </script>
 
缓动效果原理：让元素运动速度有所变化、慢慢停下来 
  核心：（目标值-现在位置）/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();
    }
}
 
 
 
轮播图自动播放功能 
定时器
类似点击右侧按钮
手动调用右侧按钮事件：arrow_r.click()即元素.click()元素被点击
 
返回顶部功能 
window.scroll(x, y); 不带单位
用封装函数，把所有的left相关的值改为跟页面垂直滚动的距离；
页面滚动了多少用 window.pageYOffset

                