Javascript & DHTML 實例編程（教程）（四）初級實例篇2―動畫

2019-11-21 02:03:31

字體：大中小

來源：轉載

供稿：網友

上篇說了動態創建結點和刪除結點的例子，這一篇說一些如何用setInterval和setTimeout做簡單的動畫。
語法皆是window.setTimeout(fn, delay), window.setInterval(fn, delay)
fn可以是一個函數名，也可以是一個執行的字符串，但要注意的是，如果fn是一個可以執行的字符串，且有參數，如window.setInterval("myFunction(obj)",1000)將可能拋出一個異常，這個時候，通常是你要傳遞一個對象參數，我建議用這樣的一個辦法來解決，也建議使用這種方法來使用window.setTimeout和window.setInterval：

window.setInterval(function (){
myFunction(obj);},1000);

還有一種情況就是在一個"class"里，即要執行this.myFunction(obj)如何實現呢？

function jsclass() {};
jsclass.prototype.init = function (obj) {
  var self = this; //創建一個this指針的引用
  window.setInterval(function(obj) {
  self.myFunction(obj);},1000);
};
jsclass.prototype.myFunction = function (obj) {
  //TODO
};

DHTML的全局方法setInterval和setTimeout，所謂全局，即在window層，不屬于DHTML的DOM元素的方法里，這兩個有一些區別，網上也有很多說明，也就是setInterval是循環執行一個指定函數，setTimeout是只執行一次。例外說明一點，屬于window層次的，可以在前面不加window，即可以用window.setInterval也可以直接用setInterval。

它們都返回一個數字型的timerId，用于cleaverInterval/clearTimeout方法，從setInterval/setTimeout中返回。如果做過桌面應用的朋友，可以把這個setInterval和setTimeout假想成創建一個線程，而timerId則是一個線程Id，而cleaverInterval/clearTimeout方法則是消毀這個線程。也許這樣可以更好的理解這兩個方法。

(在具體的應用中，我更驅向于用setTimeout。)

知道這兩個方法的功能，先來寫一個簡單的例子：

一個一秒后彈出的alert對話框。

<script>
window.setTimeout(function () {
  alert("timeout example after 1 second");
},1000)
</script>

每一秒創建一個新DIV結點的函數
<script>
function intervalExample() {
  var div=document.createElement("div");
  div.innerHTML = "tutorial of DHTML and javascript programming, by www.never-online.net";
  document.body.appendChild(div);
}
window.setInterval(intervalExample,1000);
</script>

而實際應用中，setTimeout可以有一個另類一些的應用，比如相當于VB中的DoEvents函數，或者.net桌面程序中Application.DoEvents();這樣的功能，也就是異步處理，因為DHTML沒有多線程，所以說這個功能在很多的時候是為了給用戶覺得不是在假死狀態，或者給其它的程序按照代碼的邏輯繼續執行下去而不會阻塞或者也不會跳過一段代碼執行。

舉個例子。

下段代碼是沒有加setTimeout的。運行后，錨點會馬上指向hash2

<script>
window.location.hash="hash1";
window.location.hash="hash2";
</script>

這一段是加了setTimeout的，錨點會在3秒后指向hash1，再在3秒后指向hash2
<script>
var doEventsDelay = 0;
function DoEvents (fn) {
  window.setTimeout(fn,doEventsDelay);
  doEventsDelay+=3000;
}
DoEvents(function () {
  window.location.hash="hash1";
  doEventsDelay-=3000;
}
);
DoEvents(function () {
  window.location.hash="hash2";
  doEventsDelay-=3000;
  }
);
</script>

下面我們做一個實用些的例子，比如一個動態顯示tip的動態菜單。

一、這里只講解setTimeout的方法，setInterval的請看demo里的代碼，還要注明一點（本例中有一個比較嚴重的問題是沒有解決的，這一問題我將留到以后再講解）是關于坐標的。比如將下面代碼中的sliderShow放到一個table中，就可能會發現一些問題了。:D

思路，得到一個元素，相對這個元素的作標，再根據一個tip的容器從而做一個動畫，
主要用到的就是相對元素的X，Y坐標，關于坐標的一些屬性意義，參見下圖：

而整個動畫的思路，見下圖

http://www.never-online.net/tutorial/js/sliderShow/sliderTip.png

注釋代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">    <head>      <title> Slider Show Demo - http://www.never-online.net </title>      <meta http-equiv="ImageToolbar" content="no" />      <style type="text/css" media="all" title="Default">        * {          font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;          margin:0;        }        body {          font-size:10pt;          text-align:center;        }        .sliderShowBox {          border:1px solid #333;          visibility:hidden;          position:absolute;          background-color:#eee;          overflow:hidden;          width:250px;          text-align:left;        }        .sliderShowContent {          padding:5px;        }      </style>      <script type="text/javascript">      //<![CDATA[        var sliderActive = false;        var sliderTimer = null;        function effect_sliderShow (sliderActId, sliderBoxId) {          if (sliderActive) return; sliderActive=true;//是否是在動畫的過程中          var sliderAct = $(sliderActId);//得到點擊的元素，以便得到坐標作動畫          var sliderBox = $(sliderBoxId);//得到tip的容器          var sliderHeight = parseInt(sliderBox.style.height)||sliderBox.offsetHeight;          //因為我們使tip的容器不可見用的是css里的visible，          //所以可以得到容器的高度，如果用display為none，則是得不到元素的高度的。但可以自定義容器的高度          var visibility = sliderBox.style.visibility;//容器是否可見          var sliderSpeed = 10;          //動畫的速度，值越小，則越快，          //說明一點，其實用到10已經將近是極限了，          //你可以將這個值改為0，事實上與10相差無幾。為何如此？先做一個懸念吧，也做為一個思考:D          if (visibility=="visible") {            //如果容器當前是可見的，這里就執行關閉動畫            sliderBox.style.visibility="visible";//將容器設為可見            sliderBox.style.top = sliderAct.offsetTop+sliderAct.offsetHeight+"px";//容器的Y坐標=相對元素的Y坐標+相對元素的高度            sliderBox.style.left = sliderAct.offsetLeft+"px";//容器X坐標與相對元素的X坐標相同            sliderBox.style.height = sliderHeight+"px";//動畫初始高度為TIP容器的原始高度            animateClose();          } else {            sliderBox.style.visibility="visible";//將容器設為可見            sliderBox.style.top = sliderAct.offsetTop+sliderAct.offsetHeight+"px";//容器的Y坐標=相對元素的Y坐標+相對元素            sliderBox.style.left = sliderAct.offsetLeft+"px";//容器X坐標與相對元素的X坐標相同            sliderBox.style.height = "1px";//動畫初始高度為1像素            animateShow();          }          function animateShow() {            var h = parseInt(sliderBox.style.height)||0;//得到容器的高度            if (h>=sliderHeight) {//如果高度>原始高度，則清除timeout，并返回              sliderBox.style.height = sliderHeight+'px';//將容器高度復原              window.clearTimeout(sliderTimer);              return sliderActive=false;            }            //容器高度+1并遞歸此顯示函數            sliderBox.style.height = h+1 +"px";            sliderTimer=window.setTimeout(animateShow, sliderSpeed);                      };          function animateClose() {            var h = parseInt(sliderBox.style.height)||sliderHeight;//得到容器的高度            if (h<=1) {//如果高度<1，則清除timeout，并返回              sliderBox.style.height = sliderHeight+'px';//將容器高度復原，否則下次容器的原始高度就為1像素了              sliderBox.style.visibility="hidden";              window.clearTimeout(sliderTimer);              return sliderActive=false;            }            //容器高度-1并遞歸此關閉函數            sliderBox.style.height = h-1 +"px";            sliderTimer=window.setTimeout(animateClose, sliderSpeed);          };                    //此函數的功能為得到一個元素的引用，參數可用元素ID或者元素對象          function $ (objId) {            if (typeof(objId)=="object") return objId;            return document.getElementById(objId);          };        };      //]]>      </script>    </head>    <body id="www.never-online.net">      <h1> Slider Show Demo </h1>      <hr/>      <a href="###" onclick="javascript:effect_sliderShow(this,'sliderShowBox')">click show setTimeout demo</a>            <div   id="iwvjtn8m0"   class="sliderShowBox" id="sliderShowBox">        <div   id="iwvjtn8m0"   class="sliderShowContent">          sliderShowtutorial of DHTML and javascript programmingby never-online, never-online.net        </div>      </div>      </body>  </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

是否覺得上面的例子很多都是重復的勞動？如果減少一些豈不更好？:D，的確如此，上面的JS代碼有近一半都是重復的，在這里我就不把它優化了，還是留給大家做一些實質性的工作，減少上面代碼的冗余。

上一篇：javascript實現的一個圖片轉移效果

下一篇：Javascript & DHTML 實例編程（教程）（三）初級實例篇1―上傳文件控件實例