js原生动画封装

最新推荐文章于 2023-02-02 14:44:52 发布

weixin_30788239

最新推荐文章于 2023-02-02 14:44:52 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/hasher/p/9278510.html

版权

<!DOCTYPE html>

<html>

<style>

.box1 {

margin: 0;

padding: 5px;

height: 200px;

background-color: #ddd;

position: relative;

}

button {

margin: 5px;

}

.box2 {

width: 100px;

height: 100px;

background-color: red;

position: absolute;

left: 0;

}

</style>

</head>

<body>

</div>

var btnArr = document.getElementsByTagName("button");

var box2 = document.getElementsByClassName("box2")[0];

var timer = null;

//绑定事件

btnArr[0].onclick = function () {

// timer = setInterval(function () {

// //盒子自身的位置+步长

// box2.style.left = box2.offsetLeft + 10 + "px";

// //如果停止盒子？清除定时器

// if(box2.offsetLeft === 200){

// clearInterval(timer);

// }

// },30);

animate(200);

}

btnArr[1].onclick = function () {

// timer = setInterval(function () {

// //盒子自身的位置+步长

// box2.style.left = box2.offsetLeft + 10 + "px";

// //如果停止盒子？清除定时器

// if(box2.offsetLeft === 400){

// clearInterval(timer);

// }

// },30);

animate(400);

}

function animate(target){

timer = setInterval(function () {

//盒子自身的位置+步长

box2.style.left = box2.offsetLeft + 10 + "px";

//如果停止盒子？清除定时器

if(box2.offsetLeft === target){

// clearInterval(timer);

}

},30);

}

</script>

</body>

</html>

转载于:https://www.cnblogs.com/hasher/p/9278510.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30788239

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生动画封装

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box1 { margin: 0; ...
复制链接

扫一扫

JavaScript——动画函数封装

shhghvvh的博客

12-03

168

目录动画函数一.动画实现原理1.核心原理2.实现步骤3.示例代码二.简单动画函数封装三.给不同的元素记录不同的定时器四.缓动动画1.效果原理2.动画函数在多个目标值之间移动通过定时器setInterval)不断移动盒子位置。(1).获得盒子当前位置(2).让盒子在当前位置加上1个移动距离(3).利用定时器不断重复这个操作(4).加一个结束定时器的条件(5)..注意此元素需要添加定位，才能使用element.style.left 二.简单动画函数封装示例代码：效果图：四.缓动动画

JS学习之动画函数的封装

weixin_53317758的博客

05-31

262

摘要变成了必填项，我只想睡一个好觉傻逼室友别再bb讲话了

参与评论您还未登录，请先登录后发表或查看评论

JavaScript之动画函数封装

m0_48375854的博客

12-24

2635

动画函数一、动画函数原理一、动画函数原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用element.style.left 如下所示： ...

js动画函数封装

最新发布

qq_46703611的博客

02-02

134

mouse over鼠标经过盒子会触发，经过盒子还会触发，mouse enter只会经过自身盒子才会触发。5.注意元素需要添加单位才能使用element.style.left。mouse enter 和mouse over的区别。注意函数需要传递两个参数：动画对象和移动到的距离。2.让盒子在当前位置上加上一个移动距离。类似，mouse over 他们两者的区别是。核心原理就是通过定时器不断移动盒子的位置。3.利用定时器不断的重复这个操作。1. 获得当前盒子的位置。十分简单的js动画封装函数。

原生JS封装动画

前端精髓

12-30

1285

用过jQuery的都知道，jQuery中有提供了一个动画方法，那就是animate方法。这个函数的关键在于指定动画形式及结果样式属性对象。

原生JS封装animate运动框架的实例

10-19

在本文中，我们将深入探讨如何使用原生JavaScript封装一个简单的`animate`运动框架。这个框架允许我们实现元素的平滑动画效果，例如改变宽度、高度、位置和透明度等属性。我们将通过一个具体的实例来解释如何实现这...

基于原生JS封装的Modal对话框插件的示例代码

10-14

本篇文章将详细介绍如何使用原生JavaScript封装一个Modal对话框插件，帮助开发者理解其原理和实现思路。首先，我们要创建一个`ModalPlugin`函数，该函数将作为我们的插件主入口。在`ModalPlugin`内部，我们将定义...

原生JS封装拖动验证滑块的实现代码示例

11-20

在本文中，我们将探讨如何使用原生JavaScript封装一个拖动验证滑块的实现。这个功能通常用于增强网站的安全性，例如在登录或注册页面中作为验证码的一种形式。我们将基于提供的标题、描述和部分内容来深入讲解这个...

JS-:原生JavaScript动画组件库

05-27

综上所述，"JS-原生JavaScript动画组件库"涉及的技术点广泛，涵盖了JavaScript基础、DOM操作、动画原理、性能优化等多个方面。通过深入理解和实践这些知识点，开发者可以创建出高效且具有交互性的动画效果。

blog:基于原生js封装类库

07-23

本博客将探讨如何基于原生JavaScript来封装一个类似于jQuery的类库，从而更好地理解和掌握JavaScript的本质，并提升开发效率。首先，我们要了解JavaScript的基本语法和特性。原生JS的核心包括变量声明（var, let, ...

原生js封装一个动画效果

wxt_wjc的博客

01-11

171

/** * 定义动画的函数 * @param {object} dom * @param {object} option 包含想要实现动画的属性以及属性值 */ function animate(dom , option) { // 2.0 首先清除定时器 clearInterval(dom.timer); // 3.0 执行定时器函数 dom.time...

原生js实现jquery函数animate()动画效果

热门推荐

zerlinda_c的博客

12-18

2万+

通过在公司一个月的实习，慢慢的对css跟html算是比较熟悉了，这几天开始研究js，今天用js写了一个jquery的animate函数，测试了下，性能还可以。个人觉得jquery并不是万能的，因为是个框架，所以有些东西写的比较死，就像animate函数一样，可选的参数不多有时候可能并不能实现我们想要的效果。　　　　注释的部分是用来测试用的，写代码的过程并不是十分顺利，因为用js平时用的不是很

JS动画封装

不忘初心

08-19

619

简单的运动函数var demo1=document.getElementById("demo1"); demo1.onmouseover=function(){ startMove(0); } demo1.onmouseout=function(){ startMove(-320); } var timer//全局变量 function

原生JS实现动画的方法

张致豪

04-15

1万+

有3种方法 setTimeout、setInterval、requestAnimationFrame 前两种方法的缺陷是需要自己设置动画帧的刷新时间。时间太短，浏览器来不及处理，时间太长，动画又不流畅。requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画。下面用3种方法分别实现进度条动画效果 //html和css...

js 匀速/缓动动画简单封装

09-10

6457

.box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative; border: 100px solid #000;

[JavaScript] 动画函数的封装

qq_49900295的博客

03-23

1262

文章目录动画实现原理核心原理：实现步骤：js的动画：css的动画：动画函数简单封装给不同对象添加不同的定时器核心原理：代码示例：缓动动画原理思路：实现效果：代码示例：动画函数添加回调函数回调函数原理：示例代码：实现效果：动画函数封装到单独js文件里面当我们学习了动画之后，我们就能做各种各样的网页特效了。有的同学总是杠，js能做的动画css也能做。首先你是来学js的没必要杠，css的灵活度远不如js,其次做网页轮播图等特效时用js是不是方便的多动画实现原理核心原理：通过定时器setInterval()

js动画（封装）

qq_35396397的博客

12-21

232

js动画应用 1.凡是可以看到过渡效果的基本都可以用到js动画 2.在一些库中有东阿虎方法封装。例如jq vue 都有 3.常用：轮播，无缝轮播，滚动联动图片放大变小过渡，… 主要通过setInterval 实现的用css 动画融合js 实现动画 ani动画方法封装方式 1.给哪个元素绑定动画 el 1.1 获取一下元素对象 2.这个元素移动的位移是多少 st 2.1 当前的位置...

js-网页特效 —— 动画函数封装

mocoll的博客

08-20

221

四、动画函数封装 4.1、动画实现原理核心原理:通过定时器setInterval0不断移动盒子位置。实现步骤: 1.获得盒子当前位置。 2.让盒子在当前位置加上1个移动距离。 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件 5.注意：此元素需要添加定位,才能使用element.style.left 4.2、动画函数的封装注意函数需要传递2个参数,动画对象和移动到的距离。 4.3、动画函数给不同元素记录不同定时器如果多个元素都使用这个动画函数,每次都要var声明定时器。我们可以给不同的元素

js封装动画函数

tangyuan97的博客

02-05

236

div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { posit...

深入理解JavaScript事件：从原生到jQuery

"本文将深入探讨JavaScript的事件处理，包括原生JavaScript和jQuery的实现方式。我们将重点关注事件框架，常用框架如jQuery、Bootstrap和Zepto，以及如何利用这些框架进行网页开发。此外，我们将以jQuery为例，讲解...