剪切层

剪切指的是要显示层的哪一部分. 你必须理解剪切值与宽度和高度之间的区别 -- 它们是不同的. Width(宽)和 Height(高) 实际上是告诉浏览器怎样将HTML元素限制其中. 而剪切则是透过一个窗口来看层 -- 它对层的属性没有任何影响(如left 或 top 的位置, 宽, 高, 显示, 等等).

剪切区被由四条边设定的剪切值定义为一个矩形(top, right, bottom, left). 每一边你可以剪去一部分可视空间, 或增加额外的可视空间. 所有剪切值都取决于层 -- 值取自层的 top-left 定位.

Clip

CSS 的剪切语法为:

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

这里的 top, right, bottom, 和 left 值是以象素(pixels)为单位的. 不要忘了这几个值的前后顺序 -- 如果你把顺序弄乱了就将变得一团糟.

这里有个使用剪切来定义可视区的 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>

在这个例子里层的四边有个额外的 10 pixel 的边, 因为 clip top 是 -10, clip left 是 -10. clip right 是 110, 它比 width(宽)多出 10, 而 clip bottom 是 60, 它比 height(高)多出 10.

我在这里也增加了一点 CSS 属性. background-color(用于IE4) 和 layer-background-color(用于 Netscape) 用来根据你的意愿改变整个层的颜色. 这样便于我们清楚地看到层是一个矩形, 并有助于观察剪切后层的变化. 一般来说层的高度(height)并非必须的, 但当使用剪切时你应当用到它, 否则 IE 将不为层中最后一个元素之后的额外空间加色.

你还可以为层设置背景图片. IE 的 CSS 是background-image:URL(filename.gif), Netscape 的是layer-background-image:URL(fildname.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(filename.gif); 
layer-background-image:URL(filename.gif); repeat:no;}

JavaScript和剪切

一旦层被剪切则你可以获得或改变使用 JavaScript 的剪切值.

Netscape中的剪切:

在Netscape中, 你可以分别获取或改变以下剪切值(clip values)中的任一个:

document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left

要用警示框显示 top clip 值, 代码如下:

alert(document.divName.clip.top)

如将 top clip 值改为 50 pixels 就应这样写:

document.divName.clip.top = 50

Internet Explorer中的剪切:

IE中你可以同时获取或改变 clip 值. 例如弹出一个警示框来显示 clip 值:

alert(divName.style.clip)

显示的将是你所设定的一串 clip 值. 下面的例子就是你所看到的显示:

"rect(0px 50px 100px 0px)"

当你想改变 clip 值时你不能象在Netscape中那样只改变其中之一 -- 你必须同时变更所有值:

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

这就使得剪切在IE4中略显笨拙. 我制作了一个通用函数以使你能在两个浏览器中都能检查 clip 值:

clipValues( )函数

clipValues()函数可以用来获取层的每一边的 clip 值.

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])
	}
}

你所要做的就是告诉它你想得到哪个层(定义为指针变量)和哪个边的 clip 值. 例如, 一旦你为一个 "blockDiv" 层定义了指针变量, 你就应如下书写以显示 clip 值的警示框:

alert(clipValues(block,"t"))

引号中你只需检查第一个字母 -- "t" (top), "r" (right), "b" (bottom), "l" (left).

点击这里查看例句.

改变剪切值

我写了两个使用简单的函数来改变 clip 值.

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 值 -- 分别列出 top, right, bottom, left.

clipTo(block,0,100,100,0)

clipBy( )函数:

clipBy() 允许你以指定的象素值来改变 clip 值 -- 相对于当前每边的 clip 值进行增减:

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)

上面一句将为 right 增加 10 pixels, 为 bottom 增加 5 pixels.

点击这里看同时使用 clipTo() 和 clipBy() 的示例.

此例也许用 Netscape 观看的效果要好一些, 这是因为它总能正常地显示背景色 -- 不论这个层的哪一部分被剪切, 层的颜色总能被正常显示. 但在 IE 中如果你超出了层的边界, 你将无法看到层的边.

动画剪切(擦拭 Wiping)

通过在重复函数中加入 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)
	}
}

点击这里查看示例.

首页 下一课: 嵌套层
copyright 1998 Dan Steinman
Translated by Cartouche YU