滤镜

汪杰 — Wed, 02 Jan 2008 00:41:00 GMT

各滤镜的使用方法基本相同，就像在CSS中定义字体大小、颜色一样。下面就以Gradient为例说明一下，其他的基本相同：
在CSS中的应用示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;}
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;}
其他的还请大家自行变通。。。
下面列举下42个常用滤镜作用说明及使用语法：
1.Gradient:
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
语法：
filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , startColorStr=iWidth , endColorStr=iWidth )
2.AlphaImageLoader:
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
3.Alpha
说明：
调整对象内容的透明度。
你可以设置整体透明度，或线性渐变和放射渐变的透明度。
语法：
filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , style=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent , startY=iPercent , finishX=iPercent , finishY=iPercent )
4.BasicImage
说明：
用于色彩处理，图像旋转，或对象内容的透明度。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
语法：
filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled , grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )
5.Blur
制作对象内容的模糊效果。
filter : progid:DXImageTransform.Microsoft.Blur ( enabled=bEnabled , makeShadow=bShadow , pixelRadius=flRadius , shadowOpacity=fOpacity )
6.Chroma
说明：
将对象中指定的颜色显示为透明。
不建议在8位到24位抖动的图片文件上使用此滤镜。例如保存时会抖动和压缩的JPEG格式图片文件，应用此滤镜，其结果会很难看。
此效果在羽化(柔化色彩以同周围相邻的颜色平和的过渡)的线条等处也不会很好的作用。
确定的 color 参数值可能会导致图片自身的透明颜色变为不透明。
语法：
filter : progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor )
7.Compositor
说明：
依据初始对象和新对象色彩的特定混合方式显示新的对象内容。
这个滤镜提供了丰富的将输入对象的色彩和透明度相互作用的图像合成的功能设置。要建立转换滤镜，遵循下列步骤：
[1]选择一个功能( function )。
[2]设置对象的合成滤镜( filter )的属性声明。
[3]确定滤镜对象初始显示的内容。合成功能将此作为输入 A 。
[4]使用合成滤镜的 apply 方法。捕获对象内容的初始显示，为转换做必要的准备。
[5]改变对象的属性，如 visibility ， innerText ， background-color ， border ，或者其[6]子对象的属性。合成功能将此作为输入 B 。
[7]使用合成滤镜的 play 方法。这会将合成功能输出的图像变化显示出来。
语法：
filter : progid:DXImageTransform.Microsoft.Compositor ( function=sFunction )
8.DropShadow
语法：
filter : progid:DXImageTransform.Microsoft.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive )
说明：
制作对象的阴影效果。
9.Emboss
说明：
用灰度值为对象内容制作浮雕纹理效果。
语法：
filter : progid:DXImageTransform.Microsoft.Emboss ( enabled=bEnabled , Bias=fBias )
10.Engrave
说明：
用灰度值为对象内容制作浮雕纹理效果。
语法：
filter : progid:DXImageTransform.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias )
11.Glow
说明：
环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。
假如对象内有文本而无背景( background )和图片，则每个文本字符将会被辉光环绕。
假如对象内有背景( background )或图片，则整个对象容器会被辉光环绕。
假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。
语法：
filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance )
12.Light
说明：
为对象的内容建立光照效果。
你可以控制光源的虚拟位置，还可以控制光焦点的横纵坐标值。以及光的类型和强度。每个滤镜最多可以添加 10 束光。要想在页面上添加更多的光，你必须使用多个滤镜。
当每束光被建立后，都有默认的环境光与之关联。你添加到对象的第一束光会替换掉它的默认的环境光。
语法：
filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled )
13.MaskFilter
说明：
将对象内容的透明像素用 color 参数指定的颜色显示作为一个遮罩，而非透明像素则转为透明。
使用 BasicImage 滤镜能够更有效率的实现这一效果。
语法：[url]http://www.pc151.com/[/url]
filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor )
14.Matrix
说明：
使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
使用此滤镜可以建立下列效果：
左右反转。将 M11 和 M12 的值取负。
上下反转。将 M21 和 M22 的值取负。
改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。
使用 padding 属性能够使最终图像边角被剪切的机会降到最小.
语法：
filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=fM12 , M21=fM21 , M22=fM22 )
15.MotionBlur
说明：
为对象内容制作运动模糊效果。
语法：
filter : progid:DXImageTransform.Microsoft.MotionBlur ( enabled=bEnabled , add=bAddImage , direction=iOffset , strength=iDistance )
16.Shadow
说明：
为对象内容建立阴影效果。
语法：
filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
17.Wave
说明：
为对象内容建立波纹扭曲效果。
语法：
filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance )
18.ICMFilter
说明：
根据颜色配置文件(.icm)转换对象的色彩内容。这样能激活对某些细节内容的显示改良，或对硬件设备输出的模拟显示。像打印机或显示器。
通过根据要显示内容的类型匹配恰当的 Intent 特性值可以改善内容显示或打印的质量。例如，当你打印时，可以设置 Intent 特性值为 Graphic 从而确保颜色对比度的恰当。较高的对比度能够使打印出的内容清晰易读。
要模拟硬件设备的色彩输出，你必须定位硬件设备的颜色配置文件(.icm)，假如制造商提供了这个文件。将这个颜色配置文件(.icm)的路径和名称指给 ColorSpace 特性，并且对硬件装置要使用的内容应用此滤镜。颜色配置文件(.icm)为你的显示器定义了内容的颜色与显示器标准颜色的偏差。这样滤镜显示就可以模拟其他硬件设备的输出。
语法：
filter : progid:DXImageTransform.Microsoft.ICMFilter ( colorSpace=sPathFilename , intent =sIntent )
19.Xray
说明：
以X光效果显示对象内容。
使用 BasicImage 滤镜可以更有效率的建立效果。
语法：
filter : Xray ( enabled=bEnabled )
20.Gray
说明：
灰度显示对象内容。
使用 BasicImage 滤镜可以更有效率的建立效果。
语法：
filter : Gray ( enabled=bEnabled )
21.Invert
说明：
反相显示对象内容。
使用 BasicImage 滤镜可以更有效率的建立效果。
语法：
filter : Invert ( enabled=bEnabled )
22.FlipH
说明：
水平翻转对象内容。
使用 BasicImage 滤镜可以更有效率的建立效果。
语法：
filter : FlipH ( enabled=bEnabled )
23.FlipV
说明：
垂直翻转对象内容。
使用 BasicImage 滤镜可以更有效率的建立效果。
语法：
filter : FlipV ( enabled=bEnabled )
24.Barn
说明：
用模拟开关门效果转换对象内容
语法：
filter : progid:DXImageTransform.Microsoft.Barn ( enabled=bEnabled , duration=fDuration , motion=sMotion , orientation=sOrientation )
25.Blinds
说明：
用百叶窗开关效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Blinds ( enabled=bEnabled , duration=fDuration , bands=iBands , Direction=sDirection )
26.CheckerBoard
说明：
用类似国际象棋棋盘的网格推拉效果转换对象内容
语法：
filter : progid:DXImageTransform.Microsoft.CheckerBoard ( enabled=bEnabled , duration=fDuration , squaresX=iColumns , squaresY=iColumns , Direction=sDirection )
27.Fade
说明：
用渐隐效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Fade ( enabled=bEnabled , duration=fDuration , overlap=fOverlap )
28.GradientWipe
说明：
用滚动渐隐效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.GradientWipe ( enabled=bEnabled , duration=fDuration , gradientSize=fGradientWidth , motion=sMotion )
29.Inset
说明：
用对角扩张效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Inset ( enabled=bEnabled , duration=fDuration )
30.Iris
说明：
用特殊形状剪切轮廓扩张或收缩显示效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Iris ( enabled=bEnabled , duration=fDuration , irisStyle=sShape , motion=sMotion )
31.Pixelate
说明：
这个转换滤镜是一个复杂的视觉效果。在转换的前半段，对象内容先显示为矩形色块拼贴，然后矩形的宽度由一个像素增加至 MaxSquare 属性所设置的值。每个矩形的颜色由其所覆盖区域的像素的颜色平均值决定。接下来的转换的后半段，矩形被还原为新内容具体的图像像素，显示出新的内容。
在使用此转换滤镜前设置此滤镜的 Enabled 特性值为 false 。这将预防在转换发生前彩色拼贴效果的静态滤镜先在对象内容上发生作用。
语法：
filter : progid:DXImageTransform.Microsoft.Pixelate ( enabled=bEnabled , duration=fDuration , maxSquare=iWidth )
32.RadialWipe
说明：
用放射状擦除效果转换对象内容。效果类似汽车挡风玻璃的刮雨刀。
语法：
filter : progid:DXImageTransform.Microsoft.RadialWipe ( enabled=bEnabled , duration=fDuration ,wipeStyle=sStyle )
33.RandomBars
说明：
用随机发生的线条转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.RandomBars ( enabled=bEnabled , duration=fDuration , orientation=sOrientation )
34.RandomDissolve
说明：
用随机像素溶解效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.RandomDissolve ( enabled=bEnabled , duration=fDuration )
35.Slide
说明：
用滑条抽离效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Slide ( enabled=bEnabled , duration=fDuration , bands=iBands , slideStyle=sslideStyle )
36.Spiral
说明：
用矩形螺旋方式转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Spiral ( enabled=bEnabled , duration=fDuration , gridSizeX=iColumns , gridSizeY=iColumns )
37.Stretch
说明：
用拉伸(缩)变形效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Stretch ( enabled=bEnabled , duration=fDuration , stretchStyle=sStretchStyle )
38.Strips
说明：
用锯齿边覆盖效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Strips ( enabled=bEnabled , duration=fDuration , motion=sMotion )
39.Wheel
说明：
用风车叶轮旋转效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Wheel ( enabled=bEnabled , duration=fDuration , spokes=iSpokes )
40.Zigzag
说明：
用类似擦地板的效果转换对象内容。
语法：
filter : progid:DXImageTransform.Microsoft.Zigzag ( enabled=bEnabled , duration=fDuration , gridSizeX=iColumns , gridSizeY=iColumns )
41.RevealTrans
说明：
提供了24种转换对象内容的效果。
语法：
filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , duration=fDuration , transition=iTransitionType )
42.BlendTrans
说明：
用渐隐效果转换对象内容。
使用 BasicImage 滤镜可以更有效率的建立效果。
语法：
filter : BlendTrans ( enabled=bEnabled , duration=fDuration )

汪杰 2008-01-02 08:41 发表评论

Tab

汪杰 — Wed, 22 Aug 2007 01:00:00 GMT

汪杰 2007-08-22 09:00 发表评论

add options 2 methods

汪杰 — Mon, 06 Aug 2007 08:44:00 GMT

汪杰 2007-08-06 16:44 发表评论

marquee

汪杰 — Tue, 07 Nov 2006 08:30:00 GMT

    中华人民共和国

    新疆维吾尔自治区

    广西壮族自治区

    内蒙古自治区

    宁夏回族自治区

汪杰 2006-11-07 16:30 发表评论

关于页面离开后Javascript变量的保存和读取

汪杰 — Sat, 28 Oct 2006 19:19:00 GMT

window.name可保存当前页面数据的方法，才突然想起window还有一个特有的name属性确实可以随着窗口的存在而存在，可以在当前窗口的任意页面随时读取和设置，可惜不能将这个name其定义为一个Object型（浏览器会自动将其转换成strnig型）。

不过从中也颇受启发，随即发现location、history、navigator也存在着这种功能：只要当前窗口存在，你定义的变量就不会丢失！而且变量名不再是单一的name，数据类型也可以随意定义。使用方法如下：

引用:

history.myVar=[1,2];
navigator.myVar=new Object;
navigator.myVar.newVar={"a":"1","b":"2"};
location.myVar="Your Variables";
......

. link:

CODE:

001.htm
002.htm

2. main.htm

CODE:

汪杰 2006-10-29 03:19 发表评论

通过window.name来保存

汪杰 — Sat, 28 Oct 2006 19:09:00 GMT

http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Tab Demo

tab1
tab2
tab3
tab4

Tab Demo Ver1.2(window.name)
Created by forfor 2006-09-12

ver1.0 2005-09-09
ver1.1 2005-09-14
ver1.2 2006-09-12
......

汪杰 2006-10-29 03:09 发表评论

表格隔行换色

汪杰 — Sat, 28 Oct 2006 05:55:00 GMT

我们可以通过document.getElementById('tb').childNodes[0]获得tbody对象，
然后通过tbody.length进行遍历，如tbody.chilNode[i].
也可以直接获得rows数组遍历，如document.getELementById('tb').rows.
对于行我们可以通过sectionRowIndex和rowIndex获得位置.

rowIndex:
Retrieves the position of the object in the rows collection for the table.
sectionRowIndex:
Retrieves the position of the object in the tBody, tHead, tFoot, or rows collection.
代码如：
[code]
function a(par) {
var trow=document.getElementById(par).rows;
var l=trow.length;
for(var i=0;iif(trow[i].rowIndex%2==0)
trow[i].style.backgroundColor="#F2F2F2";
else
trow[i].style.backgroundColor="#ffffff"
}
}
[/code]

新建网页 1

1	1	6
2	2	6
3	3	6
4	4	6
5	5	6
6	6	6