### 完美运动框架
- 多个值同时变化：`startMove(obj, json)`
- `setStyle` 同时设置多个属性
- 参数传递：
- `JSON` 的使用
- `for in` 遍历属性
- 运用到运动框架
- 检测运动停止
- 标志变量
- 例子：伸缩同时淡入淡出的菜单
- 代码：
```js
// ./lib/move2.js
// 封装获取计算后元素样式函数，返回小数
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, '') [name];
}
}
// 任意值运动框架
function startMove(obj, json, fnEnd ) {
clearInterval(obj.timer);
obj.timer = setInterval(move, 30);
function move() {
var current = 0;
var stop = true;
for (const attr in json) {
if (attr === 'opacity') {
// 用 parseFloat 保留小数并去掉后面 px ，从左至右提取数字，遇到不是数字跳出
// Math.round() 四舍五入取整
current = Math.round(parseFloat(getStyle(obj, attr))*100);
} else {
// 用 parseInt 去掉后面 px ，从左至右提取数字，遇到不是数字跳出
current = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - current)/4;
if (speed < 0) {
speed = Math.floor(speed);
} else {
speed = Math.ceil(speed);
}
if (json[attr] === current) {
stop = true;
} else {
stop = false;
if (attr === 'opacity') {
obj.style[attr] = (current + speed)/100;
obj.style.filter = "alpha("+[attr]+ "=" + (current + speed) + ")";
} else {
obj.style[attr] = current + speed + 'px';
}
}
console.log('json[attr]:',json[attr],'attr:', attr,'current:',current,'getStyle:',getStyle(obj, attr),'speed:',speed);
}
if (stop === true) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd()
}
}
}
}
```
- ```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>链式运动框架</title>
<style>
body {
width: auto;
height: 2000px;
}
#div1 {
width: 50px;
height: 50px;
background: rgb(99, 128, 255);
position: absolute;
}
#div_p {
width: 50px;
height: 50px;
background-color: cornsilk;
position: absolute;
right: 0;
top: 50%;
}
#div2 {
width: 50px;
height: 50px;
background: rgb(99, 128, 255);
position: absolute;
}
#div3 {
position: absolute;
height: 50px;
width: 0px;
right: 50px;
background-color: rgb(119, 95, 255);
overflow: hidden;
}
#div4 {
position: absolute;
width: 100px;
height: 0px;
right: 50px;
top: 0px;
overflow: hidden;
background-color: rgb(98, 163, 248);
}
#close {
position: absolute;
float: right;
right: 5px;
color: white;
}
</style>
<script src="./lib/move2.js"></script>
<script>
window.onload = function () {
// 封装 getElementById
function get(id) {
return document.getElementById(id);
}
var btn1 = get('btn1');
var div1 = get('div1');
btn1.onclick = function () {
startMove(div1,{'height': 400, "width": 101, "opacity": 30, "left": 100, "top": 200}, msg);
}
function msg() {
console.log('链式函数执行完成！')
}
// 跟随页面滚动的缓冲侧边栏
var div_p = get('div_p');
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var odiv_pHeight = parseInt(getStyle(div_p, 'height'));
var target = parseInt((document.documentElement.clientHeight - odiv_pHeight)/2 + scrollTop);
startMove(div_p, {"top":target});
console.log(
'可视区：', document.documentElement.clientHeight,
'滚动距离：', scrollTop,
'div3的高度：', getStyle(div_p, 'height'),
'目标值：', target)
}
// 土豆伸缩菜单栏
var div2 = get('div2');
var div3 = get('div3');
var div4 = get('div4');
var close = get('close');
div2.onclick = function () {
// div3.style.display = 'block';
// div4.style.display = 'block';
startMove(div3, {"width":100},fnEnd)
function fnEnd() {
startMove(div4,{"height":100, "top":-100})
}
}
close.onclick = function () {
startMove(div4, {"top": 0, "height": 0}, fnEnd);
function fnEnd() {
startMove(div3, {"width":0})
}
}
}
</script>
</head>
<body>
<input type="button" id="btn1" value="链式运动">
<div id="div1"></div>
<div id="div_p">
<div id="div2">土豆</div>
<div id="div3">播放器</div>
<div id="div4"><a id="close" href="javascript:;">关闭</a></div>
</div>
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一个 JS 特效：鼠标提示框
- 网页换肤和 if 判断
- 函数传参
- 循环 while 和 for
- 导航栏选项卡
- JS 简易日历
- JavaScript 基础
- JavaScript 组成
- 变量类型
- 变量类型转换
- 变量的作用域和闭包
- 命名规范
- 运算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函数返回值
- 函数传参与行间样式
- 数组基础操作
- 定时器的使用
- 定时器的作用
- 数码时钟
- Date 对象其它方法
- 延时提示框
- 无缝滚动
- DOM基础应用
- DOM 基础
- DOM 节点
- 操作元素属性
- DOM 元素灵活查找
- DOM 操作应用
- 创建、插入和删除元素
- 文档碎片
- DOM操作应用高级
- 表格标签
- 表格应用
- 表单应用
- JS 运动基础
- 运动基础
- 运动框架及应用
- 缓冲运动
- 运动的停止条件
- JS 运动应用
- 多物体运动框架
- 任意值运动框架
- 仿 Flash 图片展示
- JS 运动中级
- 链式运动框架
- 完美运动框架
- 运动框架总结
- 运动框架应用
- JS事件基础
- Event 对象和事件
- 鼠标事件
- 键盘事件
- JS 事件中级
- 默认事件
- 拖拽
- JS 事件高级应用
- 事件绑定
- 高级拖拽
- 自定义滚动条
- Ajax 基础
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中级
- 编写 Ajax
- Ajax 数据
- JS 面对对象基础
- 面对对象是什么
- JS 中的面对对象
- 第一个面对对象的程序
- 工厂方式
- 原型：Prototype
- 面对对象编程方式
- JS 面对对象实例
- 面对对象的选项卡
- JS 面对对象高级
- Json 方式的面向对象
- 拖拽和继承
- 使用继承
- 系统对象
- BOM 应用
- BOM 基础
- 尺寸及坐标
- 常用方法和事件
- COOKIE 基础与应用
- 什么是 cookie
- 使用 cookie
- JS 中的正则表达式
- 正则表达式基础
- 字符串与正则配合
- 字符串
- 量词
- 常用正则例子
- JS Template 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符