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 class="sliderShowBox" id="sliderShowBox">        <div 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―上传文件控件实例