使用过IE6-10,开发过程中有很多浏览器之间的兼容问题,幸运的是,在任何版本中的浏览器,都有提供相关的解决方案。
今天我们来看看IE中的魔法滤镜,它可以让你的页面更酷炫。
界面滤镜:
AlphaImageLoader //图片处理滤镜
Gradient //渐变滤镜
静态滤镜:
Alpha //透明滤镜
BasicImage //色彩、图像旋转、透明滤镜
Blur //模糊滤镜
Chroma //颜色透明滤镜,不支持8~24位图片
Compositor //色彩混合滤镜
DropShadow //阴影滤镜
Emboss //浮雕滤镜
Engrave //灰度浮雕滤镜
Glow //外轮廓滤镜
Light //光照滤镜
MaskFilter //透明像素遮罩滤镜
Matrix //矩阵变换滤镜
MotionBlur //动感模糊滤镜
Shadow //内阴影滤镜
Wave //波纹滤镜
ICMFilter //颜色检索滤镜。
Gray //灰度滤镜
Invert //反相滤镜
Xray //X光滤镜
FlipH //水平翻转滤镜
FlipV //垂直翻转滤镜
转换滤镜
Barn //开关门滤镜
BlendTrans //渐隐滤镜, 配合BasicImage效率更高。
Blinds //百叶窗滤镜
CheckerBoard //象棋网格滤镜
Fade //渐隐滤镜
GradientWipe //线性滚动渐隐效果。
Inset //对角扩张效果滤镜
Iris //剪切轮廓扩张或收缩滤镜
Pixelate //色块拼贴滤镜
RadialWipe //放射状擦除滤镜
RandomBars //随机线条滤镜
RandomDissolve //随机像素溶解滤镜
RevealTrans //转换滤镜
Slide //滑条抽离滤镜
Spiral //矩形螺旋滤镜
Stretch //拉伸变形滤镜
Strips //锯齿边覆盖滤镜
Wheel //风车叶轮旋转滤镜
Zigzag //擦地板滤镜
我们来看看实际效果:




以上是静太滤镜的效果,动态滤镜较为复杂。
动态滤镜在IE中是一种幻灯片的方式进行的,可以达到很别具一格的效果,在页面中head标签中加入:
其中 http-equiv可以取值:”Site-Enter” , “Site-Exit” , “Page-Exit” , “Page-Enter”等分别表示进入页面或退出页面时的事件。blendTrans是一种动态滤镜效果,其中参数Duration是该动态效果的持续时间(单位:秒) ,Transition是过滤类型。
过滤类型:
0 矩形缩小 1 矩形扩大 2 圆形缩小
3 圆形扩大 4 下到上刷新 5 上到下刷新
6 左到右刷新 7 右到左刷新 8 竖百叶窗
9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗
12 点扩散 13 左右到中间刷新 14 中间到左右刷新
15 中间到上下 16 上下到中间 17 右下到左上
18 右上到左下 19 左上到右下 20 左下到右上
21 横条 22 竖条 23 以上22种随机选择一种
配置好效果后,我们要通过javascript来装备(Apply)我们的元素,然后播放(Play)动态滤镜。我们也可以使用status来判断我们元素当前播放的状态。
el.filters(过滤类型).Apply(); //准备
el.filters(过滤类型).Play(); //播放
el.filters(过滤类型).Stop(); //停止
el.filters(过滤类型).status //获取动态滤镜当前状态。