javascript div元素彈性緩衝運動程式碼例項
彈性緩衝運動是一種比較人性化的效果,下面就通過程式碼例項做一下簡單介紹。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; } body{ margin:5px auto; text-align:center; background:#f0f0f0; } #box{ position:absolute; top:20px; left:20px; width:100px; height:60px; border:1px solid #808; } #st{ cursor:pointer; background:#ccf; margin:5px; } #st{ display:block; } </style> <script type="text/javascript"> var el=500; var p=10; var t=20; function done(){ var cl = parseInt(getStyle(box,'left')); if(cl<el){ box.style.left = cl + Math.ceil((el-cl)/p) + 'px'; setTimeout('done()', t); } else { box.style.left = el + 'px'; this.style.display = 'none'; } } function getStyle( elem, name ){ if (elem.style[name]){ return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle){ name = name.replace(/([A-Z])/g,"-$1"); name = name.toLowerCase(); var s = document.defaultView.getComputedStyle(elem,""); return s && s.getPropertyValue(name); } else { return null; } } window.onload=function(){ var st = document.getElementById('st'); st.onclick=function(){done()} } </script> </head> <body> <div id="box"> <span id="st">檢視效果</span> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).var el=500,宣告一個變數並賦值500,它規定了left屬性最大值。
(2).var p=10,宣告一個變數並賦值為10,它用來進行計算每次執行的運動尺寸。
(3).var t=20,宣告一個變數並賦值為20,它用來作為定時器函式執行延遲的時間。
(4).function done(){},此方法是實現緩衝運動的核心。
(5).var cl = parseInt(getStyle(box,'left')),獲取元素當前的left屬性值。
(6).if(cl<el){
box.style.left = cl + Math.ceil((el-cl)/p) + 'px';
setTimeout('done()', t);
} ,如果當前的left屬性值小於最大值。
就繼續設定元素的left屬性值,因為el-cl是越來越小的,所以運動速度會越來越快。
然後使用遞迴方式不斷執行done方法。
(7).else {
box.style.left = el + 'px';
this.style.display = 'none';
},否則的話
元素的left值設定為最大值。
然後隱藏當span元素。
(8).function getStyle( elem, name )此方法可以獲取元素的指定樣式屬性值,具體可以參閱相關閱讀。
二.相關閱讀:
(1).parseInt()方法可以參閱javascript parseInt()函式一章節。
(2).Math.ceil()方法可以參閱javascript Math.ceil()一章節。
(3).setTimeout()方法可以參閱setTimeout()一章節。
(4).getStyle()方法可以參閱getComputedStyle()和currentStyle屬性的用法一章節。
相關文章
- javascript緩衝運動程式碼例項JavaScript
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- javascript div水平運動程式碼例項JavaScript
- javascript元素水平運動程式碼例項JavaScript
- javascript緩衝彈性方式設定元素的尺寸JavaScript
- javascript元素勻速運動程式碼例項JavaScript
- javascript緩衝運動框架程式碼分析JavaScript框架
- JavaScript元素上下彈性運動JavaScript
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- JavaScript 緩衝運動JavaScript
- javascript動態建立元素程式碼例項JavaScript
- JavaScript運動框架程式碼例項JavaScript框架
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- JavaScript水平緩衝運動詳解JavaScript
- js圖片緩衝載入程式碼例項JS
- js實現的元素運動程式碼例項JS
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- JavaScript in運算子程式碼例項JavaScript
- 設定div元素漸隱效果程式碼例項
- flex彈性佈局實現元素垂直居中效果程式碼例項Flex
- css彈性佈局程式碼例項CSS
- flex彈性佈局程式碼例項Flex
- javascript獲取指定元素父元素程式碼例項JavaScript
- javascript通用獲取元素樣式屬性值程式碼例項JavaScript
- css控制div元素旋轉指定角度程式碼例項CSS
- display: flex彈性佈局程式碼例項Flex
- javascript刪除指定子元素程式碼例項JavaScript
- javascript遍歷陣列元素程式碼例項JavaScript陣列
- javascript元素迴圈插入效果程式碼例項JavaScript
- javascript獲取元素封裝程式碼例項JavaScript封裝
- JavaScript刪除元素節點程式碼例項JavaScript
- 可以拖動的div塊程式碼例項
- jQuerydiv元素拖動效果程式碼例項jQuery
- javascript的cssText屬性程式碼例項JavaScriptCSS
- MFC雙緩衝繪圖例項繪圖
- 移動端div塊拖動效果程式碼例項
- 將div元素固定於頁面指定位置程式碼例項
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫