动态基本教程第八节: 用 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) } } 

看以上范例