使用原生的javascript封装动画函数(有callback功能)
<!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封装动画函数(有callback功能)的更多相关文章
- JS---案例：移动元素，封装动画函数
案例:移动元素,封装动画函数 1. div要移动,要脱离文档流---position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在styl ...
- JavaScript封装一个函数效果类似内置方法concat()
JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...
- 原生javascript封装的函数
1.javascript 加载的函数 window.onload = function(){} 2.封装的id函数 function $(id) { return document.getElemen ...
- javascript 自定义动画函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- Javascript之回调函数（callback）
1.回调函数定义: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方 ...
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 原生javascript 基础动画函数封装(一)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- javascript封装的函数
/*获取一个指定长度随机数*/ csdn.random = function (len) { if (!len) len = 5; var r = Math.random().toString(); ...
- js原生实现链式动画效果
// 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; ...
随机推荐
- Xcode - Your development team, "", does not support the Push Notifications capability.
1.问题描述: 从git上checkout了别人的一个工程文件,选择team时,Xcode显示如下问题 Your development team, "xxx.xxx.xxx", ...
- flask BytesIO() 多个文件打包下载 zipfile
使用zipfile模块可以将多个文件打包成zip文件进行下载,但是常规的操作方式会在服务器磁盘上生成一个zip文件占用磁盘空间. 后引入BytesIO将文件写入到内存中然后下载: def dl_pla ...
- Logstash在Linux上安装部署
Logstash 简介: Logstash 是一个实时数据收集引擎,可收集各类型数据并对其进行分析,过滤和归纳.按照自己条件分析过滤出符合数据导入到可视化界面.它可以实现多样化的数据源数据全量或增量传 ...
- CentOS环境下jdk安装部署
1.准备jdk安装文件: 这里我使用的是 jdk-7u79-linux-x64.tar.gz 2.在 /usr/local 目录下创建 sotfware目录,并上传JDK文件: 解压文件并修改文件夹为 ...
- hdu1166 敌兵布阵【线段树】
C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...
- ububtu下安装配置搜狗输入法
安装搜狗输入法 for linux参考教程: http://blog.csdn.net/u013894834/article/details/60357071 安装后会遇到无法切换英文的问题,可以参考 ...
- 表优化 altering table OPTIMIZE TABLE `sta_addr_copy`
表优化 altering table OPTIMIZE TABLE `sta_addr_copy` [总结] 1.实际测试的结果是,在state sqlaltering table OPTIMIZE ...
- CGI servlet Applet Scriptlet Scriptlet JSP data layer(数据层),business layer(业务层), presentation layer(表现层)
https://en.wikipedia.org/wiki/Common_Gateway_Interface In computing, Common Gateway Interface (CGI) ...
- DLL远程注入及卸载实现
实现win7 64位系统下dll的远程注入及卸载,尚未再其他系统测试 源码地址:https://github.com/ndhisrfzs/InjectDll
- oracle(九)索引扫描
(1)索引唯一扫描(index unique scan) (2)索引范围扫描(index range scan) (3)索引全扫描(index full scan) (4)索引快速扫描(index f ...