专栏首页前端知识分享第57天:匀速运动封装函数

第57天:匀速运动封装函数

一、动画的原理

动画的基本原理 : 让盒子的 offsetLeft   +  步长

Math.abs(-5) 取绝对值函数

二、匀速运动封装函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>匀速动画封装</title>
 6     <style>
 7         div{
 8             width: 100px;
 9             height: 100px;
10             background-color: yellow;
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16 <button id="btn1">200</button>
17 <button id="btn2">400</button>
18 <div id="box"></div>
19 </body>
20 </html>
21 <script>
22     var btn1=document.getElementById("btn1");
23     var btn2=document.getElementById("btn2");
24     var box=document.getElementById("box");
25     btn1.onclick=function(){
26         animate(box,200);
27     }
28     btn2.onclick=function(){
29         animate(box,400);
30     }
31     //封装匀速运动
32     function animate(obj,target){
33         var speed=obj.offsetLeft < target ? 5 : -5;//用来判断是+还是-
34         obj.timer=setInterval(function(){
35             var result=target-obj.offsetLeft;//差值不会大于5
36             obj.style.left=obj.offsetLeft+speed+"px";
37             if(Math.abs(result)<=5){//如果差值不小于5 到位置了
38                 clearInterval(obj.timer);
39                 obj.style.left=target+"px";//有5px差距直接跳转
40             }
41         },20)
42     }
43 </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第61天:json遍历和封装运动框架(多个属性)

     var json = {width:200,height:300,left:50} console.log(json.width); for(var k in...

    半指温柔乐
  • 第184天:js创建对象的几种方式总结

    javascript 创建对象简单的来说,无非就是使用内置对象或各种自定义对象,当然还可以使用JSON,但写法有很多,也能混合使用。

    半指温柔乐
  • 第178天:表单验证

    半指温柔乐
  • JVM 与 Linux 的内存关系详解

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身...

    Java技术栈
  • Linux与JVM的内存关系分析(文末送书)

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身...

    黄泽杰
  • Linux与JVM的内存关系分析

    引言 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约600m,Linux...

    美团技术团队
  • 看完这篇文章你还敢说你懂JVM吗?

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身...

    用户1516716
  • JVM 与 Linux 的内存关系详解

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身...

    苏先生
  • 看完这篇文章你还敢说你懂JVM吗?

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身...

    lyb-geek
  • 【论文】Awesome Relation Classification Paper(关系分类)(PART II)

    1. Relation Classification via Recurrent Neural Network(Zhang 2015)

    zenRRan

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动