动态基本教程第八节: 用 Clip 来剪裁 Layer 的可视区
回顾
我们已经学到了
- 定义一个 DIV 元素， 以及用 CSS 来给出它的性质 (CSS 位置设定)
- 如何知道哪种浏览器正在被使用 (通用程序)
- 如何设立一个通用的指针变量指向一个 DIV 元素 (通用程序)
- 以及如何显示或隐蔽这个 DIV 元素 (显示和隐蔽)
- 移动这个 DIV 元素 (元素的移动)
- 连续移动这个 DIV 元素 (元素的滑动)
- 用键盘来控制元素的运动 (键盘控制)
- 用鼠标来控制元素的运动 (鼠标控制)
这一节我们将告诉你如何来控制一个元素的可视区, 也就是说用这个技术
来展开或缩小一个元素的可视区域. 请你记住了我们的目标是写出兼容在
NetScape 和 Internet Explore 上的程序
Clipping Layers
Clipping 的意思就是决定元素的哪个部位可以被看到. 就像一个模子一样.
它不会改变任何元素的性质. Clipping 的区域是一个长方形. 而这个长方形
的尺寸取决于于四个边的位置. 这四个边用 top, right, botton, left 来表示. 请
注意这四个边的位置是相对于元素的而不是相对于窗口的.
Clipping 的 CSS 语法是
clip:rect(top,right,bottom,left)
这里 top, right, bottom, left 的值全是 pixels. 注意它们的位置是固定的. 下面
的 DIV 元素就被 Clipping 来重新确定了可视范围.
<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:70; clip:rect(-15, 15, 85, 85); background-color:#FF0000; layer-background-color:#FF0000;"> </DIV>
在上面这个例子中,
- 上边可视区域比原来扩大 15 格, 因为 top = -15
- 右边可视区域比原来小了 15 格, 因为 right = 15
- 下边可视区域比原来扩大 15 格, 因为 bottom = 85, 而元素高度是 70
- 左边可视区域比原来小了 15 格, 因为 right = 85, 而元素宽度是 100
在上面这个例子, 有两个性质需要解释一下. background-color 是专为 ie4
而 layer-background-color 是为 Netscape. 这个性质是设立 DIV 背景颜色.
一般我们不需要给出 DIV 的 height. 但如果要用 Clipping, 那你最好给.
你也可y以给 DIV 元素设置背景图象, background-image:URL(filename.gif)
是为IE所设, 而 layer-background-image:URL(fildname.gif). 是为 Netscape.
但 Netscape 需要另外一个性质 repeat:no. 请看下面的例子
<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 和 Clipping
我们已经知道了用 clipping 的四个值来决定一个元素的可视区. 同改变元
素位置一样, 我们也可以用 JavaScript 来改变这四个值.
Netscape 的 Clipping:
在 Netscape, 你可以用下面这四个性质来取得 Clipping
document.divName.clip.top document.divName.clip.right document.divName.clip.bottom document.divName.clip.left
比如你想要把 Clipping 的 top 显示在屏幕上, 你可以用 alert:
alert(document.divName.clip.top)
你如果想改变 top 的值到 50 pixels, 你可以
document.divName.clip.top = 50
Internet Explorer 的 Clipping:
IE 可以用一个性质得到所有四个 Clipping 的值, 比如
alert(divName.style.clip)
这句的结果将是
"rect(0px 50px 100px 0px)"
当你想改变 Clipping 的值的时候, 你也需要把这四个值一起改动. 烦!
divName.style.clip = "rect(0px 100px 50px 0px)"
通用子程序 clipValues()
这个子程序是用来得到其中一个 Clipping 的值的.
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])
}
}
你只要告诉这个子程序哪个 layer 的哪条边, 它就能告诉你那条边的
Clipping 的值. 假如我们给一个 Layer 设立了一个指针变量 "blockDiv",
我们就可以用下面的语句来显示 top 的 clipping 的值
alert(clipValues(block,"t"))
这里我们用了这样的表示法 "t" (top), "r" (right), "b" (bottom), "l" (left).
改变 Clip 值的通用子程序
clipTo() 子程序:
clipTo() 让你能重新 Clip 一个 Layer 到给定的值
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)"
}
用它的时候, 你要给出 Layer 的名字和四个边的 Clip 的值, 比如
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)"
}
比如你想稍微增大 right 和 bottom 边的值, 你可以
clipBy(block,0,10,5,0)
动画 Clipping (Wiping)
所谓 wiping 就是连续相对改变 clipping 区域. 下面这个子程序就是往右边
逐步扩大 clipping 区域, 每次 5 pixels.
function wipe1() {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",30)
}
我们还得加上个条件来停止 wiping,
function wipe1() {
if (clipValues(block,'r')<200) { clipBy(block,0,5,0,0) setTimeout("wipe1()",30) } }