动态HTML创作之六(动画擦除)
我们在上面所做的剪切效果都是在瞬间完成的，有时候可能需要更为“柔和”的方式改变一个层的尺寸，那么我们现在就来讨论这种动画效果的剪切，即“擦除”效果。

当我们把前面提到的“clipBy()”命令加入一个时间循环函数时，就可以建立一种清楚的擦除效果。现在，首先建立“wipe()”函数。它的工作方法与前面提到的对象滑动有一些相似，只需建立一个循环函数不停地重新剪切层：

function wipe1() {

clipBy(block,0,5,0,0)

setTimeout("wipe1()",30)

}

这种循环不可能无限制地进行下去，因此，必须使擦除能够在需要的时候停止，于是需要检查一下边界是否已经达到了事先指定的值：

function wipe1() {

if(clipValues(block,'r')<200) {

clipBy(block,0,5,0,0)

setTimeout("wipe1()",30)

}

}

这样，一个简单的擦除定义就完成了。让我们看一下完整的动画擦除实例：

<HTML>

<HEAD>
<TITLE>DHTML Demo</TITLE>
<script language="javascript">
<!--

ns4=(document.layers)?true:false
ie4=(document.all)?true:false

function init() {
if(ns4) block=document.blockDiv
if(ie4) block=blockDiv.style
}

function clipValues(obj,which) {
if(ns4) {
if(which=="t") return obj.clip.top
if(which=="r") return obj.clip.right
if(which=="b") return obj.clip.bottom
if(which=="l") return obj.clip.left
}
else if(ie4) {
var clipv=obj.clip.split("rect(")[1].split(")")[0].split("px")
if(which=="t") return Number(clipv[0])
if(which=="r") return Number(clipv[1])
if(which=="b") return Number(clipv[2])
if(which=="l") return Number(clipv[3])
}
}

function clipTo(obj,t,r,b,l) {
if(ns4) {
obj.clip.top=t
obj.clip.right=r
obj.clip.bottom=b
obj.clip.left=l
}
else if(ie4) obj.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}

function clipBy(obj,t,r,b,l) {
if(ns4) {
obj.clip.top=clipValues(obj,'t')+t
obj.clip.right=clipValues(obj,'r')+r
obj.clip.bottom=clipValues(obj,'b')+b
obj.clip.left=clipValues(obj,'l')+l
}
else if(ie4) obj.clip="rect("+(this.clipValues(obj,'t')+t)+"px "
+(this.clipValues(obj,'r')+r)+"px "
+Number(this.clipValues(obj,'b')+b)+"px "
+Number(this.clipValues(obj,'l')+l)+"px)"
}

function wipe1() {
if(clipValues(block,'r')<200) {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",30)
}
}

function wipe2() {
if(clipValues(block,'r')>50) {
clipBy(block,0,-5,0,0)
setTimeout("wipe2()",30)
}
}

//-->
</script>
</HEAD>

<BODY onLoad="init()">
<div id="blockDiv"
style="position:absolute;left:150;top:80;width:200;height:100;
clip:rect(0,50,100,0);background-color:#ff0000;
layer-background-color:#ff0000">
</div>
<p>
查看各边的剪切值：
<a href="javascript:alert(clipValues(block,'t'))">顶端</a>,
<a href="javascript:alert(clipValues(block,'r'))">右侧</a>,
<a href="javascript:alert(clipValues(block,'b'))">底端</a>,
<a href="javascript:alert(clipValues(block,'l'))">左侧</a>
</p>
<p> <a href="javascript:wipe1()">将右边界擦除至200</a>
<br><a href="javascript:wipe2()">将右边界擦除到50</a>
</p>
</BODY>
</HTML>
用户可以单击浏览器上面的“将右边界擦除至200”来查看运行的效果。

虽然剪切的结果与前面文章中的“瞬间”剪切一样，但是，执行的过程却大不相同。可以通过定义擦除的时间间隔来控制这种动态效果的速度。通过动态剪切的方法，可以令网页的浏览者在众多单一的网页中产生耳目一新的感觉。

在进行擦除的前后，都可以通过点击第一行中的“检查边界值”来获取当前的层所在的位置与尺寸。