十种用JavaScript处理图片的特别效果

分类:Web之旅 | 发布者:Tim | 发布日期: 2008-5-14 | 天气:晴  | |
10种用JavaScript来进行处理图片的特别效果
前段时间网络上暇逛,在“可能吧”看到一篇“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的图片就会有倒影的效果了。

其它图片处理特效添加方法相同。
Tags: , ,

疯狂的代码
2012-3-9 10:09
无比强大
奇遇林 Homepage
2010-1-12 18:53
放大镜有用场,其它的确实不什么实用.
hi
2009-4-1 17:46
谢谢你分享
dream
2008-11-2 12:10
挺新奇的,好好看下!
hehe
2008-7-21 11:26
很强大的js,不过感觉没啥实用价值……
分页: 1/1 第一页 1 最后页