javascript元素勻速運動程式碼例項
勻速運動是一種簡單的動畫效果,下面就通過程式碼例項介紹一下如何利用javascript實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { margin: 0; padding: 0; } div { margin: 0; padding: 0; } .odiv { width: 200px; height: 200px; background: #f00; position: relative; left: -200px; top: 100px; } .sdiv { width: 20px; height: 60px; background: #00f; position: absolute; top: 70px; right: -20px; } </style> <script language="javascript"> window.onload = function () { var odiv = document.getElementById('odiv'); odiv.onmouseover = function () { startMover(0); } odiv.onmouseout = function () { startMover(-200); } } var timer = null; function startMover(itarget) { clearInterval(timer); var odiv = document.getElementById('odiv'); timer = setInterval(function () { var speed = 0; if (odiv.offsetLeft > itarget) { speed = -1; } else { speed = 1; } if (odiv.offsetLeft == itarget) { clearInterval(timer); } else { odiv.style.left = odiv.offsetLeft + speed + 'px'; } }, 30); } </script> </head> <body> <div id="odiv" class="odiv"> <div id="sdiv" class="sdiv"></div> </div> </body> </html>
當滑鼠懸浮,可以使元素從左側展開,通常應用於客服系統。
不過勻速運動效果較差,更為人性化是帶有換從效果的,可以參閱具有緩衝效果的側欄展開客服系統一章節。
一.相關閱讀:
(1).window.onload = function () {},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var odiv = document.getElementById('odiv'),獲取id屬性值為odiv的元素物件。
(3).odiv.onmouseover = function () {
startMover(0);
},為odiv元素註冊onmouseover事件處理函式。
(4).odiv.onmouseout = function () {
startMover(-200);
},為odiv元素註冊onmouseout事件處理函式。
(5).var timer = null,宣告一個變數作為定時器函式的標識。
(6).function startMover(itarget) {},此函式實現了勻速動畫,引數就是目標值。
(7).clearInterval(timer),停止上一個定時器函式的執行,否則的滑鼠連續懸浮或者離開會導致多個定時器函式重複執行。
(8).var odiv = document.getElementById('odiv'),獲取元素物件。
(9).timer = setInterval(function () {},30),每隔30毫秒執行一次匿名函式。
(10).var speed = 0,宣告一個變數並賦值為0,下面會用到。
(11).if (odiv.offsetLeft > itarget) {
speed = -1;
}else {
speed = 1;
}
如果odiv.offsetLeft值大於目標值,那麼就將speed設定為-1,否則的話賦值為1。
(12).if (odiv.offsetLeft == itarget) {
clearInterval(timer);
},如果達到目標值,則停止定時器函式的執行。
(13).else {
odiv.style.left = odiv.offsetLeft + speed + 'px';
},否則的話就設定odiv.style.left。
二.相關閱讀:
(1).onmouseover事件可以參閱javascript mouseover事件一章節。
(2).onmouseout事件可以參閱javascript mouseout事件一章節。
(3).clearInterval()可以參閱clearInterval()一章節。
(4).setInterval()可以參閱setInterval()一章節。
(5).offsetLeft可以參閱offsetleft一章節。
相關文章
- javascript元素水平運動程式碼例項JavaScript
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- javascript動態建立元素程式碼例項JavaScript
- JavaScript運動框架程式碼例項JavaScript框架
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- javascript緩衝運動程式碼例項JavaScript
- javascript div水平運動程式碼例項JavaScript
- js實現的元素運動程式碼例項JS
- canvas水平勻速運動效果Canvas
- JavaScript in運算子程式碼例項JavaScript
- css水平元素寬度自適應均勻排列程式碼例項CSS
- javascript獲取指定元素父元素程式碼例項JavaScript
- javascript刪除指定子元素程式碼例項JavaScript
- javascript遍歷陣列元素程式碼例項JavaScript陣列
- javascript元素迴圈插入效果程式碼例項JavaScript
- javascript獲取元素封裝程式碼例項JavaScript封裝
- JavaScript刪除元素節點程式碼例項JavaScript
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- jQuerydiv元素拖動效果程式碼例項jQuery
- javascript元素內容漸現效果程式碼例項JavaScript
- javascript獲取元素的順序程式碼例項JavaScript
- javascript獲取li元素內容程式碼例項JavaScript
- JavaScript浮動廣告程式碼例項JavaScript
- javascript動態設定元素的樣式簡單程式碼例項JavaScript
- js元素上下移動效果程式碼例項JS
- js動態連結<a>元素程式碼例項JS
- js動態建立HTML元素程式碼例項JSHTML
- jquery動態新增li元素程式碼例項jQuery
- 方向鍵控制元素移動程式碼例項
- js元素的震動效果程式碼例項JS
- javascript元素透明度漸變效果程式碼例項JavaScript
- javascript元素滑鼠跟隨效果程式碼例項詳解JavaScript
- javascript刪除陣列重複元素程式碼例項JavaScript陣列
- javascript元素3D旋轉效果程式碼例項JavaScript3D
- 使用javascript清空表單元素資料程式碼例項JavaScript
- javascript按照值刪除陣列元素程式碼例項JavaScript陣列
- javascript去除陣列中重複元素程式碼例項JavaScript陣列
- flex產品列表均勻分佈程式碼例項Flex