使用原生的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; ...
随机推荐
- backBone.js之Model篇 (1) 简单实例
“Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法 我们先来看一个demo,initialize,这是一个初始化方法,但是写这 ...
- PPTP客户端无法拨号778故障解决
Win7客户端无法拨号提示778 CentOS服务器端 日志/var/log/messages提示一下错误信息 GRE: read(fd=6,buffer=611860,len=8196) from ...
- HOJ 2985 Wavio Sequence（最长递增子序列以及其O(n*logn)算法）
Wavio Sequence My Tags (Edit) Source : UVA Time limit : 1 sec Memory limit : 32 M Submitted : 296, A ...
- JSTL 学习
对于页面访问数据的统计,可以使用内置对象的相应方法进行计数工作,这个对象要在jsp对象的整个生命周期中setAttribute()和getAttribute()application.setAttri ...
- 洛谷P3244 落忆枫音 [HNOI2015] 拓扑排序+dp
正解:拓扑排序+dp 解题报告: 传送门 我好暴躁昂,,,怎么感觉HNOI每年总有那么几道题题面巨长啊,,,语文不好真是太心痛辣QAQ 所以还是要简述一下题意,,,就是说,本来是有一个DAG,然后后来 ...
- 发送html内容的email（转）
html中无法使用css, js.你发送一个<div>片断就好了,不用写整个html页面,因为即使写了,邮件客户端也会删除body之外(包括<body>这个标签)的内容,只留下 ...
- python3爬虫-爬取新浪新闻首页所有新闻标题
准备工作:安装requests和BeautifulSoup4.打开cmd,输入如下命令 pip install requests pip install BeautifulSoup4 打开我们要爬取的 ...
- mysql 数据操作 多表查询 多表连接查询 外链接之左连接 右连接
1.外链接之左连接:优先显示左表全部记录 left join 在内连接的基础上保留左表的记录 即便左表有一条记录和右表没有关系,也把他留下 mysql> select * from empl ...
- 【剑指offer】用两个栈实现队列
一.题目: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 二.思路: 两个栈A,B,A负责进栈,B负责出栈,进栈很容易,A中添加即可,出栈需要从B里出,所以要先 ...
- 远程调用Spark平台中的程序
用scala语言,开发好了在spark平台上可以一直运行的机器学习模型 现在有个需求: 要远程调用该模型的一些方法并获取结果 那么可以使用jetty在服务器端主节点占用一个端口然后对外提供http服务 ...