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 的性能优化: ...
随机推荐
- springcloud-知识点总结（三）：Hystrix & Dashboard & turbine & Zuul & SpringCloud Config
1.Hystrix断路器简介 Hystrix断路器简介 hystrix对应的中文名字是“豪猪”,豪猪周身长满了刺,能保护自己不受天敌的伤害,代表了一种防御机制,这与hystrix本身的功能不谋而合,因 ...
- 安装php调试工具 Xdebug的步骤 火狐 phpstorm联调
一 安装服务器端 1 选择你的版本 <?php phpinfo(); ?> 比如我的: 关键是这三项:PHP Version 7.3.0Architecture x86 (x86是32位系 ...
- Lock关键字
public abstract class CountBase { public abstract void Increment(); public abstract void Decreament( ...
- 【转】IO多路复用机制详解
高性能IO模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking ...
- 【VBA】ExcelファイルのOpen
※変数の定義を強制する方法: 一番上に.「Option Explicit」を追加して.変数の定義が必須となる. ソース Private Sub CommandButton2_Click() //スクリ ...
- linux之重定向命令
1.shell重定向概念:shell重定向包含输出重定向和输入重定向 何为输入输出方向?何为标准输入输出方向? 标准输入方向:从键盘读取用户输入的数据,然后再把数据拿到程序(C语言程序.Shell 脚 ...
- viewstate？
用于存放数据,可永久保存,存放在页面的隐藏控件里 支持string,integer,array,boolean,ArrayList,hashtable类型,使用viewstate会增加页面h ...
- JAVA初学者的JDB 尝试
使用JDB调试简单递归程序 跟着娄老师的博客学习, 首先在终端使用Ctrl+Shift+T打开三个标签,方便操作. 使用Vim编辑自己的程序,练习程序如下 1 public class Factori ...
- UI 设计的整个工作流程是怎样的？
作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个 ...
- 一个价格，两份大礼！Mockplus X MindManager限时联合大促
3月暖春,阳光明媚了,工作量也伴随气温回升了,面对那么多的tasks,效率提升已经迫在眉睫.为了更好的服务产品设计,为各位产品经理.UI设计师.UX设计师等带来更快更简单的设计解决方案,Mockplu ...