### 完美運動框架
- 多個值同時變化:`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 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符