种用JavaScript处理图片的特别效果
种用JavaScript处理图片的特别效果
分类: Web之旅 | 发布者: Tim | 发布日期: 2008-5-14 | 天气:
大 | 中 | 小 
大 | 中 | 小
10种用JavaScript来进行处理图片的特别效果
前段时间网络上暇逛，在“ 可能吧”看到一篇“10个用能用JavaScript实现的图片特效”
然后连接到国外的一个叫 Blog Oh Blog原文上。
感觉非常有趣，不需要Photoshop来进行处理，图片本身还是原来的图片
用JavaScript来自动对页面上的图片在原来的基础上处理显示出的特别效果
有需要玩玩可以体验下。
1、图片倒影效果（ Reflex.js）
这个脚本能使图片产生倒影的效果。效果如下：
2、图片边角卷叶效果（ Curl.js）
这个JavaScript能使图片产生卷页的效果，而且鼠标悬停时可以添加动态卷页效果。效果如下：
3、图片花边效果（ Edge.js）
这个脚本能使图片的边缘产生花边和模糊效果，。效果如下：
4、图片圆角、阴影效果（ Corner.js）
这个JavaScript能使图片的边角成为圆角并且整个图片有阴影效果。效果如下：
5、图片幻灯片框架效果（ Slided.js）
这个脚本能使图片的周边产生幻灯片的框架效果。效果如下：
6、图片高光立体按钮效果（ Glossy.js）
这个脚本能使图片产生立体的光泽效果，犹如水晶按钮般，还会产生阴影。效果如下：
7、图片电影胶片效果（ Filmed.js）
这个脚本能使图片产生犹如电影胶片的效果，还能调整阴影立体感。效果如下：
8、图片内部放大镜效果（ Loupe.js）
这个脚本能使图片的内部生成一个放大镜，能让浏览者拖动放大镜放大查看图片的效果。效果如下：
9、图片边框与阴影效果（ Instant.js）
这个JavaScript能使图片产生犹如照片的边框效果效果。效果如下：
10、图片斜光立体效果（ Bevel.js）
这个脚本能使图片产生立体的效果，犹如水晶按钮般，还会产生阴影
跟Glossy.js差不错，但立体程度与光泽有所区别。效果如下：
应用以上图片效果在网页方法：
下载解压后上传到空间，然后在需要显示效果的页面内head标签里添加入以下代码（示范倒影效果reflex.js）：
然后，在想要显示图片处理特效的图片img标签里添里加入class类参数，例如：
更详细可到官方网站查看。本身下载回来的文件里面也有详细用法介绍
然后，加上该class的图片就会有倒影的效果了。
其它图片处理特效添加方法相同。
前段时间网络上暇逛，在“ 可能吧”看到一篇“10个用能用JavaScript实现的图片特效”
然后连接到国外的一个叫 Blog Oh Blog原文上。
感觉非常有趣，不需要Photoshop来进行处理，图片本身还是原来的图片
用JavaScript来自动对页面上的图片在原来的基础上处理显示出的特别效果
有需要玩玩可以体验下。
1、图片倒影效果（ Reflex.js）
这个脚本能使图片产生倒影的效果。效果如下：
以下为引用部分
下载地址（官方提供）： Reflex.zip
2、图片边角卷叶效果（ Curl.js）
这个JavaScript能使图片产生卷页的效果，而且鼠标悬停时可以添加动态卷页效果。效果如下：
以下为引用部分
下载地址（官方提供）： Curl.zip
3、图片花边效果（ Edge.js）
这个脚本能使图片的边缘产生花边和模糊效果，。效果如下：
以下为引用部分
下载地址（官方提供）： Edge.zip
4、图片圆角、阴影效果（ Corner.js）
这个JavaScript能使图片的边角成为圆角并且整个图片有阴影效果。效果如下：
以下为引用部分
下载地址（官方提供）： Corner.zip
5、图片幻灯片框架效果（ Slided.js）
这个脚本能使图片的周边产生幻灯片的框架效果。效果如下：
以下为引用部分
下载地址（官方提供）： Slided.zip
6、图片高光立体按钮效果（ Glossy.js）
这个脚本能使图片产生立体的光泽效果，犹如水晶按钮般，还会产生阴影。效果如下：
以下为引用部分
下载地址（官方提供）： Glossy.zip
7、图片电影胶片效果（ Filmed.js）
这个脚本能使图片产生犹如电影胶片的效果，还能调整阴影立体感。效果如下：
以下为引用部分
下载地址（官方提供）： Filmed.zip
8、图片内部放大镜效果（ Loupe.js）
这个脚本能使图片的内部生成一个放大镜，能让浏览者拖动放大镜放大查看图片的效果。效果如下：
以下为引用部分
下载地址（官方提供）： Loupe.zip
9、图片边框与阴影效果（ Instant.js）
这个JavaScript能使图片产生犹如照片的边框效果效果。效果如下：
以下为引用部分
下载地址（官方提供）： Instant.zip
10、图片斜光立体效果（ Bevel.js）
这个脚本能使图片产生立体的效果，犹如水晶按钮般，还会产生阴影
跟Glossy.js差不错，但立体程度与光泽有所区别。效果如下：
以下为引用部分
下载地址（官方提供）： Bevel.zip
应用以上图片效果在网页方法：
下载解压后上传到空间，然后在需要显示效果的页面内head标签里添加入以下代码（示范倒影效果reflex.js）：
<script src="reflex.js" type="text/javascript"></script>
然后，在想要显示图片处理特效的图片img标签里添里加入class类参数，例如：
<img src="image.gif" alt="" class="reflex" />
更详细可到官方网站查看。本身下载回来的文件里面也有详细用法介绍
然后，加上该class的图片就会有倒影的效果了。
其它图片处理特效添加方法相同。