javaScript 物体多形态改变加回调函数
小方块同时改变 width height top left opacity(透明度) 加回调函数 改变第二个方块。
效果如下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
opacity: 0.1;
background-color: red;
position: absolute;
left: 0;
} #topDiv {
top: 100px; } #bottomDiv {
top: 300px;
}
</style>
</head> <body>
<div id="topDiv"></div> <div id="bottomDiv"></div> </body>
<script> var topDiv = document.getElementById("topDiv");
var bottomDiv = document.getElementById("bottomDiv"); //选择两个小方块 //获取css样式函数
function getStyle(dom, attr) { //兼容ie 获取css样式
if (window.getComputedStyle) {
return window.getComputedStyle(dom, null)[attr];
} else {
return dom.currentStyle[attr];
}
}
//绑定事件函数
function addEvent(ele, type, handle) { //兼容ie 绑定事件
if (ele.addEventListener) {
return ele.addEventListener(type, handle, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + type, function () {
handle.call(ele);
})
} else {
ele['on' + type] = handle;
}
} addEvent(topDiv, "click", function () {//绑定事件
startMove(this, { width: 400, height: 400, top: 200, left: 300, opacity: 1 }, function () {
//传入第一个值为 dom， 第二个值为对象方式 键 => 值 第三个为回调函数，
startMove(bottomDiv, { width: 400, height: 400, top: 200, left: 800, opacity: 1 }, function () {
alert("over");
});
})
}) function startMove(dom, attrObj, callback) {
clearInterval(dom.timer);
//清理上个定时器，如果不清理上个定时器，多次调用同个函数会导致同时执行多个定时器，会发生很好玩的现象，多个定时器同时抢行。
if (attrObj.opacity) {
attrObj.opacity *= 100;
//判断传进来的对象中是否有opacity，有的话 把数放大一百倍。
//因为opacity的值 是在 0 ~ 1 之间，如果放大一百倍，处理小数点也不怕。下面代码会直接把小数点给干掉
//92行的代码会干掉小数点 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 三目运算符
} dom.timer = setInterval(function () {
var speed = null, iCur = null;//iCur 用来存要修改值的当前值
var bStop = true; //用来记录 物体是否 运行到目标点，如果没有就为flase，如果为true，停止定时器， for (var attr in attrObj) {
if (attr == "opacity") {
iCur = parseFloat(getStyle(dom, attr)) * 100;
//传进来的值放大一百倍， 当前的opacity值也要放大一百倍
} else {
iCur = parseInt(getStyle(dom, attr));
//获取要改变的物体当前值。
} speed = (attrObj[attr] - iCur) / 7;//物体的速度 距离目标点越近，就越小 当到达目标点时，速度减小为0
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//舍弃计算之后的小数点，没见过哪个页面的 width和height的值带小数点的吧 if (attr == "opacity") {
dom.style.opacity = (speed + iCur) / 100;
//计算完速度后 把放大一百倍的数值 恢复原状，赋值
} else {
dom.style[attr] = speed + iCur + 'px';
} if (attrObj[attr] !== iCur) {
bStop = false;
//判断 元素的当前值 是否已经运动 到目标点，
//如果不到，把bStop 变成false， 定时器不会停止，只要进来一次，说明还没有运动到目标点,继续运行。
//只要 没有进来过判断，说明，全部要运动的 width height 等 已经到达目标点， }
}
if (bStop) {
clearInterval(dom.timer);//bStop 为true的时候，说明 全部已经到点，可以停止定时器了，
callback();//定时器停止后，执行回调函数， 这个函数会等到 startMove()执行完毕后触发。 }
}, 30)
}
</script> </html>
附上没有注释的代码，有时候有注释的代码 看起来 还比较复杂
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
opacity: 0.1;
background-color: red;
position: absolute;
left: 0;
} #topDiv {
top: 100px; } #bottomDiv {
top: 300px;
}
</style>
</head> <body>
<div id="topDiv"></div> <div id="bottomDiv"></div> </body>
<script> var topDiv = document.getElementById("topDiv");
var bottomDiv = document.getElementById("bottomDiv"); function getStyle(dom, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(dom, null)[attr];
} else {
return dom.currentStyle[attr];
}
} function addEvent(ele, type, handle) {
if (ele.addEventListener) {
return ele.addEventListener(type, handle, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + type, function () {
handle.call(ele);
})
} else {
ele['on' + type] = handle;
}
} addEvent(topDiv, "click", function () {
startMove(this, { width: 400, height: 400, top: 200, left: 300, opacity: 1 }, function () {
startMove(bottomDiv, { width: 400, height: 400, top: 200, left: 800, opacity: 1 }, function () {
alert("over");
});
})
}) function startMove(dom, attrObj, callback) {
clearInterval(dom.timer);
if (attrObj.opacity) {
attrObj.opacity *= 100;
} dom.timer = setInterval(function () {
var speed = null, iCur = null;
var bStop = true; for (var attr in attrObj) {
if (attr == "opacity") {
iCur = parseFloat(getStyle(dom, attr)) * 100;
} else {
iCur = parseInt(getStyle(dom, attr));
}
//物体的速度 距离目标点越近，就越小 当到达目标点时，速度减小为0
speed = (attrObj[attr] - iCur) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (attr == "opacity") {
dom.style.opacity = (speed + iCur) / 100;
} else {
dom.style[attr] = speed + iCur + 'px';
} if (attrObj[attr] !== iCur) {
bStop = false;
}
}
if (bStop) {
clearInterval(dom.timer);
callback(); }
}, 30)
}
</script> </html>
javaScript 物体多形态改变加回调函数的更多相关文章
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
- JavaScript学习-5——异步同步、回调函数
----------异步同步函数 ----------回调函数 一.异步同步函数 同步:发送一个请求,等待返回,然后再发送下一个请求 异步:发送一个请求,不等待返回,随时可以再发送下一个请求 同步可以 ...
- javascript与jQuery的each,map回调函数参数顺序问题
<script> var arr = [2,3,6,7,9]; //javascript中的forEach 和 map方法 arr.forEach(function(value,index ...
- 理解 JavaScript 回调函数并使用
JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...
- [转]理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...
- 【JavaScript】理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...
- 理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...
- JavaScript 的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- [转]JavaScript 的性能优化：加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
随机推荐
- 原生js实现Base64编码解码
注:ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1 ...
- react-native 新手爬坑经历(Could not connect to development server.)
来,先说下报错出现场景,刚跑完项目加载完是好的,但是双击R后就开始耍小脾气了-红屏出现,如下图 首先检查包服务器是否运行正常.在项目文件夹下输入react-native start或者npm star ...
- Modelsim command line 传参数到 .do 文件
gui跑mdelsim总觉得很麻烦,使用命令来启动方便了很多,类似linux一样,其实目前windows也可以做到,只是业界不怎么用windows罢了. 基于modelsim搭了一个UVM环境, 用 ...
- 十五、Facade 窗口设计模式
需求:让复杂的事务看起来简单 原理: 代码清单: DataBase: public class DataBase { private DataBase(){} public static Proper ...
- 中间件之Kafka
(一)kafka简介 Kafka/Jafka 高性能跨语言的分布式发布/订阅消息系统,数据持久化,全分布式,同时支持在线和离线处理. 1.1 kafka设计目标 高吞吐率 在廉价的商用机器上单机可支持 ...
- linux查询公网ip
查询公网ip[出口IP] 1.curl icanhazip.com 2.curl ipecho.net/plain 3.curl www.trackip.net/i
- python 迭代器生成
博客:http://www.cnblogs.com/alex3714/articles/5765046.html 列表生成式 [i*2 for i in range(10)] #创建时就生成,不调用也 ...
- select2插件设置选中值并显示的问题
在select2中,要想设置指定值为选中状态并显示: $("#select2_Id").val("XXXXX").select2() 或者 var obj= $ ...
- tomcat7闪退
问题是我昨天运行的好好的,今天加了些代码,tomcat7就会启动闪退.我把conf/server.xml中的<Context />去掉,tomcat又能正常启动! 那么问题出在哪里呢? 我 ...
- CentOS Linux下VNC Server远程桌面配置详解
http://www.ha97.com/4634.html PS:偶以前基本不用Linux的远程图形桌面,前几天有开发的同事配置CentOS的vnc有问题,找我解决,就顺便记录总结一下,这个总结是比较 ...