JavaScript匀速动画封装

女爷i 2022-06-01 04:21 250阅读 0赞

HTML部分

<span style="color:#000000"><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>点击到200</button> <button>点击到400</button> <div class="box1"></div> </body> </html></span>

css部

<style>  *{ padding: 0;  margin: 0;  } button{ margin-top: 20px;  margin-left: 20px;  } div{ width: 100px;  height: 100px;  background-color: #aaa;  /*margin-left: 20px;*/  /*margin-top: 20px;*/  position: absolute;  }

function animate(ele,speed,target) {
      //使用定时器之前，必须清除定时器，否则会出现不可预知的bug。
      //ele.timer	把定时器作为元素的属性定义，这样的好处是避免重复定义定时器。
        clearInterval(ele.timer);  
    //dire用来判断方向，如果当前的位置比目标值大那么就反向走，反之亦然
        var  dire = ele.offsetLeft<target?speed:speed*-1;
        ele.timer = setInterval(function (){
            //方向
            var val =  target-ele.offsetLeft;
            ele.style.left = ele.offsetLeft+dire+"px";
            //停止方法
            if(Math.abs(val)<=speed){
                // console.log(1);
                ele.style.left = target+"px";
                clearInterval(ele.timer);
            }
        },30);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript—封装animte动画函数

封装Animte 动画函数虽然可能以后的开发中可能根本不需要自己写，Jquery 给我们封装好了，或者用CSS3的一些属性达到这样的效果可能更简单。我比较喜欢底层的算法

淡淡的烟草味﹌/ 2023年10月11日 13:15/ 0 赞/ 31 阅读

相关 27 - JavaScript 特效：offset家族和匀速动画(含轮播图的实现)

前言 JS动画的主要内容如下： 1、三大家族和一个事件对象：三大家族：offset/scroll/client。也叫三大系列。事件对象/event（事

今天药忘吃喽~/ 2023年06月14日 11:59/ 0 赞/ 135 阅读

相关 javascript动画_JavaScript动画简介

javascript动画 Despite what many developers believe, CSS-based animation is not the only

傷城~/ 2023年02月22日 03:40/ 0 赞/ 22 阅读

相关 JavaScript动画实现的原理、动画函数的封装

JavaScript动画实现的原理、动画函数的封装动画实现的原理核心原理是通过定时器setInterval（）不断移动盒子的位置实现步骤： 1. 获得盒

- 日理万妓/ 2023年01月02日 02:20/ 0 赞/ 186 阅读

相关 js中匀速动画和缓慢动画(javascript)

> 缓动动画函数封装obj目标对象 target 目标位置 > 思路： > 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 > 2. 核心算法：(目标值

深碍√TFBOYSˉ_/ 2022年12月08日 05:09/ 0 赞/ 180 阅读

相关 javascript匀速动画和缓冲动画

关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。使用js做动画最重要的一个函数就是s

谁借莪１个温暖的怀抱￠/ 2022年09月26日 02:14/ 0 赞/ 196 阅读

相关 js匀速动画及动画库

<table> <tbody> <tr> <td><b>准备知识</b></td> </tr> </tbody> </table> <table

今天药忘吃喽~/ 2022年06月07日 00:53/ 0 赞/ 286 阅读

相关 JavaScript匀速动画封装

HTML部分 <span style="color:000000"><!doctype html> <html lang="en"> <head> <meta

女爷i/ 2022年06月01日 04:21/ 0 赞/ 251 阅读

相关原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画

offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲

r囧r小猫/ 2022年03月08日 11:22/ 0 赞/ 912 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 479 阅读