前端学习笔记-JS-BOM-动画函数封装

最新推荐文章于 2023-07-27 14:05:10 发布
最新推荐文章于 2023-07-27 14:05:10 发布
阅读量189 收藏 1
点赞数
分类专栏： 前端学习-JavaScript DOM BOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36434637/article/details/101039013
版权

动画实现原理

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

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

    <script>
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
    </script>

代码优化：

<!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);
            // 当每次用var timer声明定时器的时候，就会在内存开辟新的空间，浪费内存资源；并且调用的时候，定时器的名字都为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.让盒子每次运动的距离都慢慢变小，速度就会慢慢的落下来

2.核心算法：（目标值：需要移动的总长度-现在的位置）/10  作为每次运动的距离 步长（10可以修改）

3.停止条件：当当前盒子位置等于目标位置就停止定时器

4.注意步长取整，否则存在精度问题

<!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>
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 定义一个 步长 =（目标值-现在的位置）/10
            obj.step = (target - obj.offsetLeft) / 10;
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + obj.step + 'px';

        }, 15);
    }

    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);
    })
    // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
    // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>
</body>
</html>

 

缓动动画在多个目标位置之间移动

<!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>
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
<button class="btn500">点击夏雨荷走500px</button>
<button class="btn800">点击夏雨荷走800px</button>
<span>夏雨荷</span>
<script>
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 定义一个 步长 =（目标值-现在的位置）/10
            // 步长需要取整，否则存在精度问题 当盒子往前移动时 需要向上取整 当盒子往后移动时 需要向下取整（盒子在行走的过程中，不要回退取整）
            obj.step = target - obj.offsetLeft >= 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + obj.step + 'px';
        }, 15);
    }

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

 

动画函数添加回调函数

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

案例：引入自己封装的动画函数，实现滑动栏效果

JS：

 function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            obj.step = target - obj.offsetLeft >= 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
            if (obj.offsetLeft === target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 停止动画后 判断是否有回调函数 如果有就执行
                if (callback) {
                    callback();   //  函数调用记得加 ()
                }
            }
            obj.style.left = obj.offsetLeft + obj.step + 'px';
        }, 15);
    }

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sliderbar {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
        }

        .con {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: purple;
            z-index: -1;
        }
    </style>
    <!--    引入animate.js 文件-->
    <script src="animate.js"></script>
</head>
<body>
<div class="sliderbar">
    <span>←</span>
    <div class="con">问题反馈</div>
</div>
<script>
    // 获取元素 当鼠标经过 sliderbar 时，con往右滑动出来，鼠标离开，收回去
    var sliderbar = document.querySelector('.sliderbar');
    var con = document.querySelector('.con');
    var span=document.querySelector('span');
    // con 需要滑动的目标距离=con盒子的宽度-sliderbar盒子的宽度
    var distance = con.offsetWidth - sliderbar.offsetWidth;
    // 鼠标经过
    sliderbar.addEventListener('mouseenter', function () {
        // 执行回调函数 当 con 被拉出来的时候 span 里面的箭头 改为 →
        animate(con, -distance,function () {
            span.innerHTML='→';
        });

    });
    // 鼠标离开
    sliderbar.addEventListener('mouseleave', function () {
        animate(con, 0,function () {
            span.innerHTML='←';
        });
    })
</script>
</body>
</html>

 

Nanami Touko
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1495
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
前端学习笔记-JS-BOM-轮播图案例/节流阀
qq_36434637的博客
09-20 803
网页轮播图 轮播图也称为焦点图，是网页中比较常见的网页特效 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧同理 3.图片播放的同时，下面的小圆圈模块跟随一起变化 4.点击小圆圈，可以播放相应的图片 5.鼠标不经过轮播图，轮播图也会自动播放图片 6.鼠标经过，轮播图模块，自动停止播放 HTML主要布局...
JavaScript学习笔记--【黑马程序员】
m0_63077733的博客
01-10 4200
学习JavaScript的记录，其中包括了对《JavaScript高级程序设计》的笔记
前端基础学习笔记
sober30的博客
07-27 4001
css3有哪些新特性：圆角盒子阴影文本阴影不透明度 ：opacity 、rgba渐变背景 ：线性渐变、径向渐变背景属性：backgroud-size、background-clip（拓展）结构选择器：first-child()…伪元素新写法 :before ::before(css3) 为了和:hover之类的伪类选择器作区分弹性盒子：flex转换：2D转换、3D转换（拓展）过渡：一般搭配hover使用animation动画（拓展）媒体查询。
前端学习笔记之函数、BOM和DOM（七）
FrebEaton的博客
08-14 450
函数 什么是函数 函数就是语句的封装，可以让这些代码方便地被复用 函数具有“一次定义，多次调用”的优点 使用函数，可以简化问题，让代码更具有可读性 函数的定义和调用 函数的定义 和变量类似，函数必须先定义然后才能使用 使用function关键字定义函数，function是“功能”的意思 函数的调用 执行函数体中的所有语句，就称为“调用函数” 调用函数非常简单，只需在函数名字后书写圆括号对即可 语句执行顺序 函数声明的提升 和变量声明提升类似，函数声明也可以被提升 函数表达式不能提升
web学习---JavaScript---笔记（三）
IOSSHAN的博客
07-04 177
BOM（Browser Object Model），浏览器对象模型。它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM比DOM更大window对象是浏览器的顶级对象，它具有双重角色：原来，JS需要写在元素后面，因为代码是从上而下执行的 现在，有了window可以将JS写在元素前面使用：，其实窗口（页面）加载事件，当文档内容完全加载完成会触发该事件，调用的处理函数 此时，script标签可以写在任意地方，即使是head标签也可以注意：传统注册事件方式只能写一次，如果有多个，会以最后
JS学习笔记(day01-day07)
阿宝的博客
02-18 152
function 函数名(){一段代码赋值式的定义var 函数名 = function(){一段代码+ document object model 文档对象模型+ 将js和html css结合+ 利用js来操作网页1. 操作样式2. 实现交互3. 动画。
JavaScript BOM与DOM 学习笔记
m0_56387086的博客
07-22 307
1.根据ID获取2.根据标签名获取3.通过HTML5新增的方法获取4.特殊元素获取。
【前端高频面试题--JS上篇】
qq_45832651的博客
02-23 506
最新最全的前端JS知识点梳理，重要知识点汇总，不服来战，放码过来！
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
【前端学习】HTML学习笔记-JS进阶
01-08
JS里面的对象 全局对象window 浏览器上是window window 有以下浏览器私有属性常用： alert（弹窗） prompt（用户填写） comfirm（确认） document(文档 DOM) console（开发者） history（浏览器 BOM） window有...
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时，应重点理解并实践这些概念，以充分利用LESS的优势。
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
JSP学习笔记-2.pdf
11-28
JSP学习笔记-2.pdf
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
最新发布
07-27
1250KVA本体基础图11
Go语言学习笔记 - 雨痕
"Go学习笔记 By 雨痕" 这是一份由雨痕编写的Go语言学习笔记，详细记录了作者在学习Go语言过程中的心得和知识点。笔记内容涵盖Go语言的基础到高级特性，适合已经观看过无闻大神视频并希望进一步巩固和深入理解Go语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值