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 的性能优化: ...
随机推荐
- MySQL InnoDB引擎B+树索引简单整理说明
本文出处:http://www.cnblogs.com/wy123/p/7211742.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...
- java应用健康检查
本文主要针对自己手写shell监控应用状态,有可系统解决方案的,比如K8S,可以略过 #!/bin/sh#health_check.sh count=`ps -ef | grep test.jar | ...
- Netty4.0源码解析 NioServerSocketChannel
一.引言Netty的Channel在JDK NIO的Channel基础上做了一层封装,提供了更多的功能.Netty的中的Channel实现类主要有:NioServerSocketChannel(用于服 ...
- JAVA获取系统信息以及系统时间
在做测试的时候,经常需要获取系统信息,并且用获取到的系统时间给生成的报告取名字. 以下代码实在TestNG展示的,没有Test NG的话需要些一个main方法. import java.net.Ine ...
- 《CSAPP》 可重定位目标文件格式
可重定位目标文件 ELF文件 ELF头以一个16字节的序列开始,这个序列描述了生成该文件的系统的字的大小和字节顺序.ELF头剩下的部分包含帮助链接器语法分析和解释目标文件的信息.其中包括ELF头的大小 ...
- .NET代码混淆——开源.net 混淆器ConfuserEx介绍
转载:https://blog.csdn.net/xiaoyong_net/article/details/78988264
- 【VBA】ExcelファイルのOpen
※変数の定義を強制する方法: 一番上に.「Option Explicit」を追加して.変数の定義が必須となる. ソース Private Sub CommandButton2_Click() //スクリ ...
- 【Nodejs】Nodejsの環境構築
参考URL:http://www.runoob.com/nodejs/nodejs-install-setup.html Windowにインストールする方法を紹介します. ▲ダウンロードURL:htt ...
- 封装的mybatis连接类
package com.kevin.utils;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSe ...
- 168. Excel Sheet Column Title (Math)
Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...