使用原生的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; ...
随机推荐
- R子集subset
> x<-c(6,1,2,3,NA,12) > x[x>5] #x[5]是未知的,因此其值是否大于5也是未知的 [1] 6 NA 12 > subset(x,x& ...
- 掌握新变革，解密新趋势|msup第29届MPD软件管理工作坊成功召开
由msup主办的第29届MPD软件管理工作坊于7月9日-7月10日在北京国家会议中心举行,25位一线讲师,近500名软件研发工作者共同探讨软件研发与科技发展趋势. 随着移动互联网的发展,软件开发行业的 ...
- 【转】MVC中的扩展点
原文地址:http://www.cnblogs.com/xfrog/tag/MVC/ MVC中的扩展点(十)辅助方法 MVC中的扩展点(九)验证 MVC中的扩展点(八)模型绑定 ...
- CodeForces - 586C Gennady the Dentist 模拟（数学建模的感觉）
http://codeforces.com/problemset/problem/586/C 题意:1~n个孩子排成一排看病.有这么一个模型:孩子听到前面的哭声自信心就会减弱:第i个孩子看病时会发出v ...
- SPOJ - DWARFLOG Manipulate Dwarfs 线段树+想法题；
题意:给你2e5个矮人,编号1~N.有2e5个操作:操作1 读取x,y,交换编号为x,y的矮人.操作2 读取AB 判断编号为A,A+1····B的矮人是否连续(不必有序). 题解:首先用pos[i]保 ...
- ArcGIS Server 内存占用相关
发布服务个数是否有上限? 不仅是服务个数,每个服务的实例数设置非常影响机器内存与CPU的占用. 发布服务时,如果服务不经常被访问,可以将最低实例数设置为0,避免后台长期占用内存. Server需要的机 ...
- Jmeter(十六)_beanshell实现字符串加密
Jmeter内置的没有MD5加密方法,所以需要写一些java代码实现加密功能,以下是具体操作: 1:用eclipse建个工程(包名.类名.方法名自己起) package com.wjika.test; ...
- elasticsearch更改mapping，不停服务重建索引（转）
原文:http://donlianli.iteye.com/blog/1924721?utm_source=tuicool&utm_medium=referral Elasticsearch的 ...
- dedecms批量导出新增文章url和标题
百度站长工具推出主动提交功能有一段时间了,可以将新产出链接立即通过此方式推送给百度,以保证新链接可以及时被百度收录.那么dedecms如何批量导出新增文章url呢?你可以用标签调用最新文章,可以用sq ...
- 迁移到 Linux：使用 sudo | Linux 中国
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/F8qG7f9YD02Pe/article/details/80976600 https://mmbi ...