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 的性能优化: ...
随机推荐
- chart.js应用中遇到的问题
问题一:chart.js的版本问题:打开官网https://github.com/chartjs/Chart.js/releases/tag/v2.7.3,点击Tags,选择最新版本,我这里选用的是V ...
- pymysql 读取数据库没有字段
import pymysql # 打开数据库连接db = pymysql.connect("localhost", "root", "root&quo ...
- 大数据入门到精通12--spark dataframe 注册成hive 的临时表
一.获得最初的数据并形成dataframe val ny= sc.textFile("data/new_york/")val header=ny.firstval filterNY ...
- German Collegiate Programming Contest 2018 A. Attack on Alpha-Zet
题目链接https://nanti.jisuanke.com/t/28852 题目大意是 h*w 的平面,每两个点有且仅有一条路径,类似于封闭的联通空间,然后在这h*w个点中选取(标记为1~N)N个点 ...
- stark组件开发之列表页面应用示例
已经解决的,自定义的扩展函数,功能.但是 不可能返回. 一个 固定的页面把! 应该是,点击那条 记录之后的编辑, 就会跳转到相应的,编辑页面.所以 这个标签的 <a href="/ ...
- javaweb开发1.环境配置（javaweb插件下载及tomact在eclips中配置）
一.下载javaweb插件 1.安装好jdk,下载eclips(Juno版本) 2.打开eclips,安装Web插件和JavaEE插件 3 在Eclipse中菜单help选项中选择install ne ...
- Linux 只列出目录的方法
1. ls -d 2. find -type d -maxdepth 1 3. ls -F | grep "/$" 4. ls -l | grep "^d"
- Vux项目搭建
1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...
- 家庭家长本-微信小程序
寒假在家的时候,做了一个简单的网页版家庭账本,后来自己学习了微信小程序的制作方法,现在想做一个微信小程序的家庭记账本. 首先要在微信公众平台注册一个微信小程序的账号,用的邮箱一个只能注册一个微信小程序 ...
- Powerdesigner数据库建模的浅谈
1.建立新模型 2.创建物理数据模型(可以选择数据库类型及版本) 3.建立表 左键点击Table这个图标,鼠标移动到空白工作区,再左键,一个表的视图就出来了,(连续左键,会出现多个表的视图),右键退出 ...