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 的性能优化: ...
随机推荐
- Echarts 柱状图属性详解
<script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init ...
- JQEUERY案例
案例效果: 点击显示全部奶粉品牌前: 点击后: 源码: <!DOCTYPE html><html><head> <meta charset="utf ...
- as3:sprite作为容器使用时，最好不要指定width,height
除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...
- 十二、Decorator 装饰器模式
设计: 代码清单: Display public abstract class Display { public abstract int getColumns(); public abstract ...
- Flask最强攻略 - 跟DragonFire学Flask - 第九篇 Flask 中的蓝图(BluePrint)
蓝图,听起来就是一个很宏伟的东西 在Flask中的蓝图 blueprint 也是非常宏伟的 它的作用就是将 功能 与 主服务 分开怎么理解呢? 比如说,你有一个客户管理系统,最开始的时候,只有一个查看 ...
- rhce 第十一题 挂载NFS共享
挂载NFS共享 在system2上挂载一个来自 system1.group8.example.com 的NFS共享,并符合下列要求: /public 挂载在/mnt/nfsmount目录上 /prot ...
- Linux权限赋予远程连接MySQL
1.mysql -u root -p (root)用户名 2.mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'r ...
- 450. Delete Node in a BST 删除bst中的一个节点
［抄题］: Given a root node reference of a BST and a key, delete the node with the given key in the BST. ...
- 735. Asteroid Collision彗星相撞后的消失数组
［抄题］: We are given an array asteroids of integers representing asteroids in a row. For each asteroid ...
- 循序渐进VBA EXCEL数据操作小实例
1 向指定单元格区域内写入数据 Sub example1() ) arr() = Array("A", "B", "C", "D& ...