JavaScript 動畫效果簡單例項程式碼

admin發表於2017-02-20
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(){
    x=x+1;
    mydiv.style.left=x+"px";
  }
  start.onclick=function(){
    clearInterval(flag);
    flag=setInterval(move,20);
  }
  stopmove.onclick=function(){
    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)，開始運動。

相關文章