完美運動框架 · JavaScript學習記錄

### 完美運動框架 - 多個值同時變化：`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> ```