HTML教程:动态HTML创作之剪切层
21视频教程网收集整理
当看到“剪切”两个字时,一定以为是要把一个层“裁剪”得小一点,其实错了,这里所说的“剪切”是一个广域概念,它泛指我们定义层的哪些部分是可见的、哪些部分不可见。
如果用CSS定位属性,那么你已经知道“clip”值、“width”和“height”的不同。“width”和“height”会告诉浏览器把一个HTML元素放置在哪个位置,而“剪切”则是建立一个窗口来查看层,它不会对层上面的其他属性产生任何影响。
剪切区域是一个定义了四边属性(“top”、“right”、“bottom”、“left”)的矩形区域,在每一边可以减少一些可视区域范围。所有的“clip”属性都将仅仅作用于当前的层。
在深入“剪切”层之前,首先了解一下“clip”的CSS语法:
clip:rect(top,right,bottom,left)
只要把像素值填入相应地方就可以了。千万不要忘记它们之间的顺序,否则将出现混乱。这里是一个使用“clip”来定义可见区域的DIV标记:
在上面的例子中还特别放置了几个CSS的属性:一个10像素宽度的边框;还有background-color(IE属性)和layer-background-color(Netscape)属性是设置整个层的背景色。
也可以为层加入背景图片,对于Internet Explorer,设置背景图片的CSS语法是
background-image:URL(20031118205611.htm.gif)
对于Netscape,是
layer-background-image:URL(20031118205611.htm.gif)
为了使Netscape能够正确显示,必须再加上CSS属性“repeat:no”。下面是一个完整的层背景CSS语句:
javascript和剪切
一旦对一个层进行了剪切,就可以使用javascript获取或改变剪切值。
在Netscape中剪切:
在Netscape里,可以单独获取或改变剪切值
document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left
如果要显示剪切值的警告框,可以是:alert(document.divName.clip.top)
然后,如果要把剪切值“top”改为 50 像素,可以这样写:document.divName.clip.top=50
在Internet Explorer中剪切:
在Internet Explorer里,必须一次获取所有的剪切值。比如可以弹出一个警告框显示剪切值:
alert(divName.style.clip)
这将返回一个字串代表已被定义的剪切值。这里是一个例子:“rect(0px 50px 100px 0px)”
当想要改变剪切值时,并不能像Netscape一样只去改写一条边界的值,必须一次重置所有的值:
divName.style.clip=“rect(0px 100px 50px 0px)”
我们编写了一段通用代码适用于两种浏览器。
clipvalues()函数
clipvalues()函数能够在两种浏览器中都表现很好,它可以返回每个边界的值。
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].splip(")")[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”定义了变量,我们可以写下下面的代码来弹出警告框,显示顶部的剪切值:
alert(clipvalues(block,"t"))
在这里边界可以用顶部(top)、右边(right)、底部(bottom)、左边(left)的第一个字母缩写“t”、“r”、“b”、“l”代替。
以下是一个完整的例子:
Check Clip values:
top
right
bottom
left
当浏览器执行上面的例子时,只要单击相应的名称,就可以获取这条边的位置,如当用户单击“right”后,浏览器显示了右边界的像素位置。
更改剪切值
如果要达到动态的效果,仅仅依靠定义剪切值是不够的,还必须能够让用户实时地改变剪切值。因此,以下的两段通用代码可以用来达到目的,改变剪切值。
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(block,0,100,100,0)
clipBy()函数
“clipBy”可以对边界像素值进行加减,来达到修改边界值的目的:
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像素,底部加上5像素。
让我们来看一个完整的使用“clipTo()”和“clipBy()”的例子:
Check Clip values:
top,
right,
bottom,
left
右边界剪切至50
clipBy(0,-10,0,0)
如果读者需要实践这个例子,建议使用Netscape浏览可能好一些,因为Netscape的处理方式是不管层是否被剪切,它总是显示层的背景色。但是在Internet Explorer里,当把边界扩大到层外时,就会看不到层的边界。
进入HTML视频教程专区
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |