JavaScript匀速动画封装

女爷i 2022-06-01 04:21 228阅读 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 条评论，228人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 JS动画封装

简单的运动函数 var demo1=document.getElementById("demo1"); demo1.onmouseover=funct

叁歲伎倆/ 2022年08月04日 05:22/ 0 赞/ 174 阅读

相关 js匀速动画及动画库

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

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

相关 JavaScript匀速动画封装

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

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

相关 Vue_动画封装

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。 eg： <fade :show='showfade'> <div>h

雨点打透心脏的1/2处/ 2022年05月20日 23:30/ 0 赞/ 214 阅读

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

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

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

相关封装animate动画

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

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