剪切指的是要显示层的哪一部分. 你必须理解剪切值与宽度和高度之间的区别 -- 它们是不同的. Width(宽)和 Height(高) 实际上是告诉浏览器怎样将HTML元素限制其中. 而剪切则是透过一个窗口来看层 -- 它对层的属性没有任何影响(如left 或 top 的位置, 宽, 高, 显示, 等等).
剪切区被由四条边设定的剪切值定义为一个矩形(top, right, bottom, left). 每一边你可以剪去一部分可视空间, 或增加额外的可视空间. 所有剪切值都取决于层 -- 值取自层的 top-left 定位.
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 的剪切值.
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()函数可以用来获取层的每一边的 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 中如果你超出了层的边界, 你将无法看到层的边.
通过在重复函数中加入 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) } }
点击这里查看示例.
首页 | 下一课: 嵌套层 |