使用原生的javascript封装动画函数(有callback功能)
2023-09-14 08:57:37 时间
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box { width: 100px; height: 100px; background-color: greenyellow; position: absolute; } </style> </head> <body> <input type="button" value="按钮" id="btn"/> <div id="box"></div> <script> var btn = document.getElementById("btn"); btn.onclick = function () { animate(box, {"height": 400, "width": 400, "borderRadius": 150, "left": 100, "top": 100}, function () { animate(box, {"height": 200, "width": 100, "borderRadius": 20, "left": 200, "top": 50}, function () { animate(box, {"height": 100, "width": 200, "borderRadius": 100, "left": 400, "top": 400}) }) }) } function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var isTrue = true; for (var k in json) {//{k:json[k]} var leader = parseInt(getAttr(obj, k)) || 0;//如果是nan的话,给一个默认值 var step = (json[k] - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step);//做一个判断,当step>0的时候,向上取整,保证至少为一;<0的时候,向下取整,保证至少为-1 leader = leader + step; obj.style[k] = leader + "px"; console.log("代码还在执行"); if (leader != json[k]) { isTrue = false; } } if (isTrue) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } function getAttr(demo, attr) { if (window.getComputedStyle) { return window.getComputedStyle(demo, null)[attr]; } else { return demo.currentStyle[attr]; } } </script> </body> </html>
相关文章
- JavaScript实现复选框全选与全不选的效果
- JavaScript中统计字符的个数
- 第一百六十节,封装库--JavaScript,ajax注册表单到数据库
- 第一百五十七节,封装库--JavaScript,预加载图片
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
- 第一百五十二节,封装库--JavaScript,表单验证--年月日注入
- 第一百四十五节,JavaScript,同步动画
- 第一百三十八节,JavaScript,封装库--插件
- [Javascript] Multiply Two Arrays over a Function in JavaScript
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Linting JavaScript with ESLint
- JavaScript易错知识点整理
- [Javascript] Wrap a Javascript Built-in constructor with Proxy
- [Javascript] IO Functor
- [Javascript] Decorators in JavaScript
- [Javascript] Automating Releases with semantic-release
- [Javascript] Redirect the browser using JavaScript
- [Javascript] Advanced Reduce: Additional Reducer Arguments
- [Javascript] What is JavaScript Function Currying?
- Javascript编程风格
- javascript面向对象之Javascript 继承
- 150行JavaScript代码实现增强现实
- 用JavaScript实现2+2=5的奥秘
- 从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)
- HTML中调用JavaScript的几种情况和规范写法
- 精通Javascript: 函数式array.forEach的8个案例
- Javascript 创建对象方法的总结