js動畫方式改變div尺寸程式碼例項
分享一段程式碼例項,它實現了使用js動態改變div元素尺寸的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone { height: 100px; width: 100px; background: #f00; position: absolute; top: 30px; left: 0; } </style> <script> window.onload=function(){ var oDiv = document.getElementById("antzone") //封裝getStyle函式 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } //封裝startMove函式 function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bTag = true; for (var attr in json) { if (attr == "opacity") { var iCur = getStyle(obj, attr) * 100; } else { var iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (json[attr] - iCur) / 8; iSpeed > 0 ? iSpeed = Math.ceil(iSpeed) : iSpeed = Math.floor(iSpeed); if (attr == "opacity") { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = "alpha(opacity=" + (iCur + iSpeed) + ")"; } else { obj.style[attr] = iCur + iSpeed + "px"; } if (iCur != json[attr]) { bTag = false; } } if (bTag == true) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30); } var btn = document.getElementById("btn"); btn.onclick = function () { startMove(oDiv, { "height": 500 }, function () { startMove(oDiv, { "width": 500 }) }); } } </script> </head> <body> <div id="antzone"></div> <button id="btn">檢視演示</button> </body> </html>
相關文章
- CSS 動畫方式改變 div 尺寸CSS動畫
- CSS3動畫方式改變div元素的尺寸CSSS3動畫
- js div層漸變方式開啟和關閉效果程式碼例項JS
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- JavaScript與CSS3動畫方式改變元素尺寸JavaScriptCSSS3動畫
- js獲取元素的實際尺寸程式碼例項JS
- js隔行變色程式碼例項JS
- js獲取瀏覽器視窗尺寸程式碼例項JS瀏覽器
- requestAnimationFrame()動畫例項程式碼requestAnimationFrame動畫
- js實現的div拖動效果例項程式碼JS
- js獲取上傳圖片尺寸和格式程式碼例項JS
- js獲取瀏覽器客戶區尺寸程式碼例項JS瀏覽器
- canvas縮放div程式碼例項Canvas
- div垂直水平居中例項程式碼
- js點選div實現閃爍效果程式碼例項JS
- js table隔行變色效果程式碼例項JS
- jQuery 動畫效果程式碼例項jQuery動畫
- js移入和離開動畫方式改變透明度JS動畫
- js實現的使用鍵盤操作div位置程式碼例項JS
- javascript div水平運動程式碼例項JavaScript
- div虛線邊框程式碼例項
- CSS讓div水平居中例項程式碼CSS
- div css左右佈局例項程式碼CSS
- jQuery使用css()方法改變元素樣式程式碼例項jQueryCSS
- 滑鼠懸浮改變連結樣式程式碼例項
- 根據比例縮放圖片的尺寸不變形程式碼例項
- css Sprite 動畫效果程式碼例項CSS動畫
- 獲取img圖片原始尺寸程式碼例項
- 圖片尺寸大小自適應程式碼例項
- jQuery獲取視窗尺寸的例項程式碼jQuery
- jQuery改變form表達的提交頁面程式碼例項jQueryORM
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- div前後翻轉效果程式碼例項
- 可以拖動的div塊程式碼例項
- div css搜尋框效果程式碼例項CSS
- div的淡入淡出效果程式碼例項
- div css三列布局效果例項程式碼CSS