对图片和文字实现滤镜和转换效果的代码生成器

转自爬山虎的世界

　　看到好多网上的朋友对图片和文字的各种滤镜和转换效果很感兴趣，这里给大家介绍一个由微软官方提供的工具，可以很方便地实现各种图片和文字效果：

字串7

字串2

　　1 访问下面的地址：http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm；

　　2 设置滤镜或转换条件，预览效果； 字串2

　　3 复制代码到剪切版；

字串4

　　4 将该代码加入到你的网络日志中。然后进行下面操作：首先是将SPAN标签替换成DIV标签；然后将属性前的“progid:DXImageTransform.Microsoft.”去除。否则MSN Space编辑器在发布日志时会自动去除这些标签，无法实现特效。代码如下所示：

　　处理前的代码：

　　处理后的代码：

Sample Text

　　当然，图片来源地址和文本也需要根据你的日志内容作相应当修改。

字串9

字串3

字串1

　　【注意】

字串2

　　以上的各种滤镜和转换效果主要是针对IE浏览器，而且有些特性和IE的版本相关（大部分需要IE5.5以上），而且，部分滤镜和转换效果代码被Space日志编辑器过滤掉，因此需要测试以保证效果！ 字串5

字串6

字串1

　　【实现原理】

　　1 滤镜：通过设置文字和图像所在的DHTML对象的Style属性来实现，即CSS；

字串3

　　2 转换：通过执行一段客户端JavaScript脚本，对文字和图像所在的DHTML对象进行控制来实现； 字串2

字串4

　　【实例】

字串7

原图

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

字串6

Alpha效果

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

Blur效果

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

字串5

dropShadow效果

The image, dark red text, and sky blue background make up the content of the filtered SPAN.

字串8

Wave效果

The image, dark red text, and sky blue background make up the content of the filtered SPAN.