javascript元素水平運動程式碼例項
本章節通過程式碼例項介紹一下如何利用原生javascript實現元素的水平運動效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{ margin:0; padding:0; } #run{ width:100px; height:100px; background:#06c; position:absolute; border:1px solid #000; left:0; } </style> <script> window.onload = function(){ var run = document.getElementById("run"); var btn = document.getElementById("btn"); var btn1 = document.getElementById("btn1"); var speed = 2; var timer = null; btn.onclick = function(){ startrun(300); } btn1.onclick = function(){ startrun(0); } function startrun(target){ clearInterval(timer); timer = setInterval(function(){ if(run.offsetLeft <target){ speed = 2; } else{ speed = -2; } if(run.offsetLeft ==target){ clearInterval(timer); } else{ run.style.left = run.offsetLeft +speed +"px"; } },30) } } </script> </head> <body> <input id="btn" type="button" value="運動向右"> <input id="btn1" type="button" value="運動向左"> <div id="run"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function(){},文件元素完全載入完畢再去執行函式中的程式碼。
(2).var run = document.getElementById("run"),獲取id屬性值為run的元素物件。
(3).var btn = document.getElementById("btn"),獲取id屬性值為btn的元素物件。
(4).var btn1 = document.getElementById("btn1"),獲取id屬性值為btn1的元素物件。(5).var speed = 2,設定運動幅度。
(6).var timer = null,宣告一個變數並賦初值為null,用來儲存定時器函式的標識。
(7). btn.onclick = function(){
startrun(300);
},點選按鈕可以使元素向右運動。
(8).btn1.onclick = function(){
startrun(0);
},點選按鈕可以使元素向左運動。
(9).function startrun(target){},此方法實現了運動效果,引數規定運動的目標座標值。
(10).clearInterval(timer),停止上一個定時器函式的執行,否則可能會出現多個定時器函式重合執行的情況。
(11).timer = setInterval(function(){
if(run.offsetLeft <target){
speed = 2;
}
else{
speed = -2;
}
if(run.offsetLeft ==target){
clearInterval(timer);
}
else{
run.style.left = run.offsetLeft +speed +"px";
}
},30),首先判斷運算運動的方位,設定speed的值。
如果到達指定位置,就停止定時器函式的執行,否則設定offset屬性值。
二.相關閱讀:
(1).clearInterval()可以參閱window.clearInterval()一章節。
(2).setInterval()方法可以參閱setInterval()一章節。
(3).offsetLeft()方法可以參閱js offsetLeft一章節。
相關文章
- javascript div水平運動程式碼例項JavaScript
- javascript元素勻速運動程式碼例項JavaScript
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- javascript文字水平滾動程式碼例項JavaScript
- javascript動態建立元素程式碼例項JavaScript
- JavaScript運動框架程式碼例項JavaScript框架
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- javascript緩衝運動程式碼例項JavaScript
- css多元素水平居中效果程式碼例項CSS
- js實現的元素運動程式碼例項JS
- JavaScript in運算子程式碼例項JavaScript
- javascript獲取指定元素父元素程式碼例項JavaScript
- css不定寬度元素水平居中程式碼例項CSS
- 公告文字水平滾動例項程式碼
- javascript刪除指定子元素程式碼例項JavaScript
- javascript遍歷陣列元素程式碼例項JavaScript陣列
- javascript元素迴圈插入效果程式碼例項JavaScript
- javascript獲取元素封裝程式碼例項JavaScript封裝
- JavaScript刪除元素節點程式碼例項JavaScript
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- jQuerydiv元素拖動效果程式碼例項jQuery
- 移動端水平滑動刪除程式碼例項
- css3實現元素垂直水平居中程式碼例項CSSS3
- javascript元素內容漸現效果程式碼例項JavaScript
- javascript獲取元素的順序程式碼例項JavaScript
- javascript獲取li元素內容程式碼例項JavaScript
- JavaScript浮動廣告程式碼例項JavaScript
- javascript動態設定元素的樣式簡單程式碼例項JavaScript
- js元素上下移動效果程式碼例項JS
- js動態連結<a>元素程式碼例項JS
- js動態建立HTML元素程式碼例項JSHTML
- jquery動態新增li元素程式碼例項jQuery
- 方向鍵控制元素移動程式碼例項
- js元素的震動效果程式碼例項JS
- 未知寬高圖片在元素中垂直水平居中程式碼例項
- css水平元素寬度自適應均勻排列程式碼例項CSS
- css3實現div元素垂直水平居中程式碼例項CSSS3
- div垂直水平居中例項程式碼