js原生动画封装

最新推荐文章于 2023-02-02 14:44:52 发布
最新推荐文章于 2023-02-02 14:44:52 发布
阅读量69 收藏
点赞数
原文链接：http://www.cnblogs.com/hasher/p/9278510.html
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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 class="box1">
    <button>运动到200</button>
    <button>运动到400</button>
    <div class="box2"></div>
</div>
 
 
<script>
 
    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

weixin_30788239
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS封装animate运动框架的实例
10-19
在本文中，我们将深入探讨如何使用原生JavaScript封装一个简单的`animate`运动框架。这个框架允许我们实现元素的平滑动画效果，例如改变宽度、高度、位置和透明度等属性。我们将通过一个具体的实例来解释如何实现这...
JavaScript之动画函数封装
m0_48375854的博客
12-24 2622
动画函数一、动画函数原理 一、动画函数原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 如下所示： ...
js动画函数封装
最新发布
qq_46703611的博客
02-02 133
mouse over鼠标经过盒子会触发，经过盒子还会触发，mouse enter只会经过自身盒子才会触发。5.注意元素需要添加单位才能使用element.style.left。mouse enter 和mouse over的区别。注意函数需要传递两个参数：动画对象和移动到的距离。2.让盒子在当前位置上加上一个移动距离。类似，mouse over 他们两者的区别是。核心原理就是通过定时器不断移动盒子的位置。3.利用定时器不断的重复这个操作。1. 获得当前盒子的位置。十分简单的js动画封装函数。
JavaScript——动画函数封装
shhghvvh的博客
12-03 166
目录动画函数一.动画实现原理1.核心原理2.实现步骤3.示例代码二.简单动画函数封装三.给不同的元素记录不同的定时器四.缓动动画1.效果原理2.动画函数在多个目标值之间移动通过定时器setInterval)不断移动盒子位置。(1).获得盒子当前位置(2).让盒子在当前位置加上1个移动距离(3).利用定时器不断重复这个操作(4).加一个结束定时器的条件(5)..注意此元素需要添加定位，才能使用element.style.left 二.简单动画函数封装 示例代码： 效果图： 四.缓动动画
JS学习之动画函数的封装
weixin_53317758的博客
05-31 261
摘要变成了必填项，我只想睡一个好觉傻逼室友别再bb讲话了
原生JS封装动画
前端精髓
12-30 1285
用过jQuery的都知道，jQuery中有提供了一个动画方法，那就是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动画基本原理和简单封装
gyq04551的博客
11-20 433
div { width: 100px; height: 100px; background-color: pink; position: absolute; } //-------------------------动画的基本原理--------------------
js帧动画函数封装
youlinaixu的博客
09-10 897
//函数的封装部分start function MovieSprites(ele, obj) { var t = this; t.ele = ele; t.classOrigin = obj.classOrigin || null; t.classAnimate = obj.classAnimate; t.fr...
原生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封装一个简单的动画函数（超详细）
Little_monster_1的博客
09-07 1034
用JS封装一个简单的动画函数 函数封装_01 文章目录用JS封装一个简单的动画函数PC端网页特效一、元素偏移量offset系列1-1. offset系列的常用属性1-2. offset 与 style二、元素可视区client系列三、元素滚动scroll系列三大系列总结动画函数的封装1-1. 动画函数的实现原理1-2. 动画缓动效果原理1-3. 动画函数添加回调函数（callback）1-4. 节流阀 PC端网页特效 首先，你要先了解以下知识点 一、元素偏移量offset系列 offset翻译过来就
JavaScript封装动画函数（三）
sleepwalker_1992的专栏
06-25 354
封装缓动动画函数，增加任意多个属性和回调函数&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{
js动画封装
minjiayanm的博客
12-27 157
js动画封装 凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画 给某个元素查看某个css 属性值 在某个时间中变化的过程。 el // 元素对象 str // css end // 结束动画值 time // 动画执行总时间 返回值为 '1' 表示动画执行完毕 ...
JavaScript匀速动画封装
清水
01-19 361
HTML部分 &lt;span style="color:#000000"&gt;&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="wi

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值