javascript實現的動畫效果簡單例項程式碼
使用jquery實現動畫效果要比原生的javascript要簡單的多,因為效果都已經封裝好了,一個函式呼叫就實現了,本章節就介紹一個使用原生javascript實現的簡單動畫例子,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>javascript實現的簡單動畫-螞蟻部落</title> <style type="text/css"> #mydiv{ width:50px; height:50px; background-color:green; position:absolute; } </style> <script type="text/javascript"> window.onload=function(){ var mydiv=document.getElementById("mydiv"); var start=document.getElementById("start"); var stopmove=document.getElementById("stopmove"); var x=0; var flag; function move()\0{ x=x+1; mydiv.style.left=x+"px"; } start.onclick=function()\0{ clearInterval(flag); flag=setInterval(move,20); } stopmove.onclick=function()\0{ clearInterval(flag); } } </script> <body> <input type="button" id="start" value="開始運動" /> <input type="button" id="stopmove" value="停止運動" /> <div id="mydiv"></div> </body> </html>
以上程式碼實現了簡單的動畫效果,下面介紹一下實現過程。
一.實現原理:
原理很簡單,就是使用定時器函式不斷的呼叫一個函式來改變div的left屬性值,這樣就實現了動畫效果,點選停止按鈕就會呼叫clearInterval()停止定時器函式。
二.程式碼註釋:
1.window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
2.var mydiv=document.getElementById("mydiv"),獲取id屬性值為mydiv的元素。
3.var start=document.getElementById("start"),獲取id屬性hi為start的元素。
4.var stopmove=document.getElementById("stopmove"),獲取id屬性值為stopmove的元素。
5.var x=0,設定一個變數用來存放設定div元素left屬性值。
6.var flag,設定一個變數存放setInterval()返回值。
7.function move(){},建立一個函式用於規定div的運動。
8.x=x+1,固定每次增加的畫素。
9.mydiv.style.left=x+"px",設定div的left屬性值。
10.start.onclick=function(){},為start元素註冊onclick事件處理函式。
11.clearInterval(flag),停止定時器函式,一方多次單擊開始按鈕造成疊加效果。
12.flag=setInterval(move,20),開始運動。
相關文章
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- javascript實現的簡單驗證碼效果程式碼例項JavaScript
- html實現簡單ListViews效果的例項程式碼HTMLView
- JavaScript簡單的日曆效果程式碼例項JavaScript
- canvas實現的簡單畫板效果程式碼例項Canvas
- javascript動態實現的表單提交效果程式碼例項JavaScript
- jQuery實現的動畫簡單例項jQuery動畫單例
- JavaScript 動畫效果例項JavaScript動畫
- javascript實現的圖片簡單切換程式碼例項JavaScript
- javascript實現的淡入淡出效果程式碼例項JavaScript
- javascript實現的燃放煙火效果程式碼例項JavaScript
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- jQuery實現的簡單投票簡單程式碼例項jQuery
- jQuery 動畫效果程式碼例項jQuery動畫
- javascript實現的數字分頁效果程式碼例項JavaScript
- 實現四捨五入效果的javascript程式碼例項JavaScript
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- JavaScript簡單的動畫效果JavaScript動畫
- css Sprite 動畫效果程式碼例項CSS動畫
- JavaScript 簡單動畫效果JavaScript動畫
- js簡單日曆效果程式碼例項JS
- js簡單摺紙效果程式碼例項JS
- 淡入淡出效果簡單程式碼例項
- javascript模擬實現連結的title效果例項程式碼JavaScript
- javascript閉包簡單程式碼例項JavaScript
- javascript作用域簡單例項程式碼JavaScript單例
- javascript模擬實現滾動條效果程式碼例項JavaScript
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- jquery實現的選項卡效果例項程式碼jQuery
- javascript元素內容漸現效果程式碼例項JavaScript
- jQuery實現的自動播放簡單程式碼例項jQuery
- canvas實現的簡單餅狀圖程式碼例項Canvas
- canvas實現的簡單塗鴉板程式碼例項Canvas
- css實現的div旋轉簡單程式碼例項CSS
- js實現的字串簡單編碼和解碼程式碼例項JS字串
- JavaScript日曆效果程式碼例項JavaScript
- canvas實現的驗證碼效果程式碼例項Canvas