动态HTML创作之五(剪切层)

当看到“剪切”两个字时，一定以为是要把一个层“裁剪”得小一点，其实错了，这里所说的“剪切”是一个广域概念，它泛指我们定义层的哪些部分是可见的、哪些部分不可见。

如果用CSS定位属性，那么你已经知道“clip”值、“width”和“height”的不同。“width”和“height”会告诉浏览器把一个HTML元素放置在哪个位置，而“剪切”则是建立一个窗口来查看层，它不会对层上面的其他属性产生任何影响。

剪切区域是一个定义了四边属性(“top”、“right”、“bottom”、“left”)的矩形区域，在每一边可以减少一些可视区域范围。所有的“clip”属性都将仅仅作用于当前的层。

在深入“剪切”层之前，首先了解一下“clip”的CSS语法：

clip:rect(top,right,bottom,left)

只要把像素值填入相应地方就可以了。千万不要忘记它们之间的顺序，否则将出现混乱。这里是一个使用“clip”来定义可见区域的DIV标记：

<div id="blockDiv"
style="position:absolute;left:50;top:80;width:100;height:50;
clip:rect(-10,110,60,-10);
background-color:#ff0000;
layer-background-color:#ff0000;">
</div>
在上面的例子中还特别放置了几个CSS的属性：一个10像素宽度的边框；还有background-color(IE属性)和layer-background-color(Netscape)属性是设置整个层的背景色。

也可以为层加入背景图片，对于Internet Explorer，设置背景图片的CSS语法是

background-image:URL(filename.gif)

对于Netscape，是

layer-background-image:URL(filename.gif)

为了使Netscape能够正确显示，必须再加上CSS属性“repeat:no”。下面是一个完整的层背景CSS语句：

<div id="blockDiv"
style="position:absolute;left:50;top:80;width:100;height:50;
clip:rect(-10,110,60,-10);
background-image:URL(background.gif);
layer-background-image:URL(background.gif);
repeat:no;">
</div>
Javascript和剪切

一旦对一个层进行了剪切，就可以使用Javascript获取或改变剪切值。

在Netscape中剪切：

在Netscape里，可以单独获取或改变剪切值

document.divName.clip.top

document.divName.clip.right

document.divName.clip.bottom

document.divName.clip.left

如果要显示剪切值的警告框，可以是：alert(document.divName.clip.top)

然后，如果要把剪切值“top”改为 50 像素，可以这样写：document.divName.clip.top=50

在Internet Explorer中剪切：

在Internet Explorer里，必须一次获取所有的剪切值。比如可以弹出一个警告框显示剪切值：

alert(divName.style.clip)

这将返回一个字串代表已被定义的剪切值。这里是一个例子：“rect(0px 50px 100px 0px)”

当想要改变剪切值时，并不能像Netscape一样只去改写一条边界的值，必须一次重置所有的值：

divName.style.clip=“rect(0px 100px 50px 0px)”

我们编写了一段通用代码适用于两种浏览器。

clipValues()函数

clipValues()函数能够在两种浏览器中都表现很好，它可以返回每个边界的值。
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].splip(")")[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])
}
}
所要做的就是告诉浏览器去获取哪个层、哪条边的剪切值。例如，一旦为层的“blockDiv”定义了变量，我们可以写下下面的代码来弹出警告框，显示顶部的剪切值：

alert(clipValues(block,"t"))

在这里边界可以用顶部(top)、右边(right)、底部(bottom)、左边(left)的第一个字母缩写“t”、“r”、“b”、“l”代替。

以下是一个完整的例子：

<HTML>

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

</script>
</HEAD>

<BODY onLoad="init()">
<div id="blockDiv" style="position:absolute;left:50;top:80;width:100;height:100;
clip:rect(0,50,100,0);background-color:#ff0000;
layer-background-color:#ff0000;">
</div>
<p>
Check Clip Values:
<a href="javascript:alert(clipValues(block,'t'))">top</a>
<a href="javascript:alert(clipValues(block,'r'))">right</a>
<a href="javascript:alert(clipValues(block,'b'))">bottom</a>
<a href="javascript:alert(clipValues(block,'l'))">left</a>
</p>
</BODY>
</HTML>

当浏览器执行上面的例子时，只要单击相应的名称，就可以获取这条边的位置，如当用户单击“right”后，浏览器显示了右边界的像素位置。

更改剪切值

如果要达到动态的效果，仅仅依靠定义剪切值是不够的，还必须能够让用户实时地改变剪切值。因此，以下的两段通用代码可以用来达到目的，改变剪切值。

clipTo()函数

“clipTo()”允许指定一个确切的值重新剪切层。
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)"
}
要使用这段代码时必须告诉它使用哪个层或对象，以及各自的上下左右值。

clip(block,0,100,100,0)

clipBy()函数

“clipBy”可以对边界像素值进行加减，来达到修改边界值的目的：

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)"
}
与“clipTo()”函数相似，也只需对四边分别指定更改的值：

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

上面这句话将在右边加上10像素，底部加上5像素。

让我们来看一个完整的使用“clipTo()”和“clipBy()”的例子:

<HTML>

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

</script>
</HEAD>

<BODY onLoad="init()">
<div id="blockDiv"
style="position:absolute;left:150;top:80;width:100;height:100;
clip:rect(0,80,100,0);
background-color:#ff0000;layer-background-color:#ff0000">
</div>
<p>Check Clip Values:
<a href="javascript:alert(clipValues(block,'t'))">top</a>,
<a href="javascript:alert(clipValues(block,'r'))">right</a>,
<a href="javascript:alert(clipValues(block,'b'))">bottom</a>,
<a href="javascript:alert(clipValues(block,'l'))">left</a>
</p>
<p>
<a href="javascript:clipTo(block,0,50,100,0)">右边界剪切至50</a>
<br><a href="javascript:clipBy(block,0,-10,0,0)">clipBy(0,-10,0,0)</a>
</p>
</BODY>
</HTML>
如果读者需要实践这个例子，建议使用Netscape浏览可能好一些，因为Netscape的处理方式是不管层是否被剪切，它总是显示层的背景色。但是在Internet Explorer里，当把边界扩大到层外时，就会看不到层的边界。