JavaScript水平緩衝運動詳解
本章節分享一段程式碼例項,它實現了簡單的元素水平緩衝運動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{ margin:0px; padding:0px; font:12px/1.5 arial } #box{ width:100px; height:100px; position:absolute; background:#06c; left:0; } </style> <script> window.onload = function(){ var box = document.getElementById("box"); var btn = document.getElementById("btn"); var timer=null; btn.onclick = function(){ startrun(300); } function startrun(target){ clearInterval(timer); timer = setInterval(function(){ var speed = (target-box.offsetLeft)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(box.offsetLeft == target){ clearInterval(timer); } else{ box.style.left = box.offsetLeft+speed+"px"; } },30); } } </script> </head> <body> <input id="btn" type="submit" value="向右運動"> <div id="box"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function(){},文件內容完全載入完畢再去執行函式中的程式碼。
(2).var box = document.getElementById("box"),獲取id屬性值為box的元素。
(3).var btn = document.getElementById("btn"),獲取id屬性值為btn的元素。
(4).var timer=null,宣告一個變數並賦初值為null,它用來儲存定時器函式的標識。
(5).btn.onclick = function(){
startrun(300);
},為按鈕註冊click事件處理函式。
(6).function startrun(target){},此函式實現了緩衝效果,引數用來規定目標位置。
(7).clearInterval(timer),停止上一個定時器函式的執行,否則有可能導致多個定時器函式同時執行。
(8).timer = setInterval(function(){},30),每隔30毫秒執行一次回撥函式。
(9).var speed = (target-box.offsetLeft)/8,規定運動的幅度,隨著運動的進行,幅度會越來越小。
(10).speed = speed>0?Math.ceil(speed):Math.floor(speed),一個三元運算子,用來對運動幅度進行控制,這個怎麼說呢,只能說是一個數學問題。
(11).if(box.offsetLeft == target){
clearInterval(timer);
},如果達到指定目標位置,那麼就停止定時器函式的執行。
(12).else{
box.style.left = box.offsetLeft+speed+"px";
},如果沒有達到的話,就會再次設定相關屬性值。
二.相關閱讀:
(1).clearInterval()方法可以參閱window.clearInterval()一章節。
(2).setInterval()方法可以參閱setInterval()一章節。
(3).offsetLeft屬性可以參閱offsetLeft一章節。
(4).Math.ceil()方法可以參閱javascript Math.ceil()一章節。
(5).Math.floor()方法可以參閱javascript Math.floor()一章節。
相關文章
- JavaScript 緩衝運動JavaScript
- javascript緩衝運動程式碼例項JavaScript
- javascript緩衝運動框架程式碼分析JavaScript框架
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- Java NIO 緩衝技術詳解Java
- JavaScript側欄緩動分享選單詳解JavaScript
- JavaScript WebGL 幀緩衝區物件JavaScriptWeb物件
- javascript元素水平運動程式碼例項JavaScript
- javascript div水平運動程式碼例項JavaScript
- Java緩衝流概述詳解(原理畫圖分析)Java
- javascript實現的運動框架詳解JavaScript框架
- JS錯誤記錄 – 右側懸浮框 – 緩衝運動JS
- 自動處理管理駕駛艙衝緩衝
- 動態更新——緩衝區物件物件
- 詳解 javascript 的 delete 運算JavaScriptdelete
- javascript緩衝彈性方式設定元素的尺寸JavaScript
- 緩衝區分析
- PHP輸出緩衝控制- Output Control 函式應用詳解PHP函式
- canvas水平勻速運動效果Canvas
- Redis緩衝區溢位及解決方案Redis
- 快速解決Oracle緩衝區忙等待事件Oracle事件
- Java™ 教程(緩衝流)Java
- MySQL InnoDB緩衝池MySql
- Java NIO:緩衝區Java
- 快取與緩衝快取
- C 呼叫redis緩衝Redis
- getchar緩衝區
- JavaScript滑動門特效詳解JavaScript特效
- JavaScript拖動div元素詳解JavaScript
- CSS3 div水平運動效果CSSS3
- 面試官:Redis中的緩衝區瞭解嗎面試Redis
- Golang併發程式設計有緩衝通道和無緩衝通道(channel)Golang程式設計
- C 標準庫IO緩衝區和核心緩衝區的區別
- Java NIO 之緩衝區Java
- Unity深度緩衝區指令Unity
- Go 緩衝通道(bufchan)用法Go
- Java整數緩衝區Java