javascript 和 Clipping

一旦clip了层, 我们就能使用javascript获得或者改变clip值 - 就象我们已经学过的得到元素的精确定位一样.

Clipping in Netscape

在NS中, 你可以获得或者改变任何一个clip的值.

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

弹出一个message,显示你所写的clip值.
alert(document.divName.clip.top)
然后把原来的top clip的值改为50 pixels.
document.divName.clip.top = 50

Clipping in Internet Explorer

IE里, 你可以在同一时间获得全部的剪切值. 例如, 你可以弹出一个对话框显示clip值.
<#336699>alert(divName.style.clip)

他将返回已定义的clip值的string. 以下是返回值示例:
"rect(0px 50px 100px 0px)"

IE里, 不能象在Netscape那样仅仅改变一条边的值实现-- 你必须一次性重新定义所有的clip值:

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

IE 4在clip方面显得有一点笨拙. 你可以使用我写的 generic function 在两个browser里检测clip值.

The Clip values() Function
该 clip values() function 能够获得每一条边的剪切值.


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


所要做的, 只是确定你需要哪个层(被定义为指针变量), 和哪条边的剪切值. 例如:
一旦我们定义指针变量为"blockDiv"层, 将得到包含top clip值的对话框.
alert(clipvalues(block,"t"))
只要写你所需要的边的首字母 - "t" (top), "r" (right), "b" (bottom), "l" (left).

范例: www.dansteinman.com/dynduo/examples/clipping1.html

改变修剪值

我写了2个generic functions非常容易的改变clip值.

The clip To() Function

clip To() 允许你定制层.


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/object, 和需要修剪的各条边的值.

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

The clipBy() Function:

clip By() 允许你根据给定的象素值移动层. 从当前的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)
上面的例子向右增加了10 Pixels, 向下增加了5 pixels.

使用Netscape 浏览效果更好, 是因为他对于layer 的 background color的定义方法 -- 无论是否被剪切他总是显示该层的颜色. 但是IE中如果你clip超出该层的边界(扩展一条边), 你将看不到该层的边缘.


动态剪切 (Wipping)

循环clipBy() 命令, 你将会看到你从没见过的, 灵巧的Wiping效果. 我想说的是, 创建你自己的wipe() function 将使一切更容易. 用和写slides相同的风格来做, 创建一个循环function来re-clips该层.


function wipe1() {
    clipBy(block,0,5,0,0)
    setTimeout("wipe1()",30)
}


为了停止wipe, 我们只需要校验该层的边时候达到了理想值.


function wipe1() {
    if (clipvalues(block,'r')<200) {
        clipBy(block,0,5,0,0)
        setTimeout("wipe1()",30)
    }
}


范例: www.dansteinman.com/dynduo/examples/clipping3.html (使用 wipes)



------------------------------------------------------------------
5DMedia 版权所有, 转载请注明出处!