种用JavaScript处理图片的特别效果
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)
这个脚本能使图片产生倒影的效果。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/990f27b53dc47af1accaa2f7d91bfd24.gif)
以下为引用部分
下载地址(官方提供):
Reflex.zip
2、图片边角卷叶效果( Curl.js)
这个JavaScript能使图片产生卷页的效果,而且鼠标悬停时可以添加动态卷页效果。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/522c65d12c6dedc2af700a1eccba9835.jpeg)
以下为引用部分
下载地址(官方提供):
Curl.zip
3、图片花边效果( Edge.js)
这个脚本能使图片的边缘产生花边和模糊效果,。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/38efafdb2761623eb24a4e247dfad4c5.jpeg)
以下为引用部分
下载地址(官方提供):
Edge.zip
4、图片圆角、阴影效果( Corner.js)
这个JavaScript能使图片的边角成为圆角并且整个图片有阴影效果。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/2a339b8cb57346f438fe9338762da2a8.jpeg)
以下为引用部分
下载地址(官方提供):
Corner.zip
5、图片幻灯片框架效果( Slided.js)
这个脚本能使图片的周边产生幻灯片的框架效果。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/8382f4bc00ca736536f8380df843b727.jpeg)
以下为引用部分
下载地址(官方提供):
Slided.zip
6、图片高光立体按钮效果( Glossy.js)
这个脚本能使图片产生立体的光泽效果,犹如水晶按钮般,还会产生阴影。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/8a784cf548d2451d171b3a11fc1b4175.jpeg)
以下为引用部分
下载地址(官方提供):
Glossy.zip
7、图片电影胶片效果( Filmed.js)
这个脚本能使图片产生犹如电影胶片的效果,还能调整阴影立体感。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/2b69f11f7a7ed4211d6b4e74d7f92d1b.jpeg)
以下为引用部分
下载地址(官方提供):
Filmed.zip
8、图片内部放大镜效果( Loupe.js)
这个脚本能使图片的内部生成一个放大镜,能让浏览者拖动放大镜放大查看图片的效果。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/8f29fe95c849d78e689fa88c08dbc98f.jpeg)
以下为引用部分
下载地址(官方提供):
Loupe.zip
9、图片边框与阴影效果( Instant.js)
这个JavaScript能使图片产生犹如照片的边框效果效果。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/216eaa4face0f42c92ac0298c42b9fd7.jpeg)
以下为引用部分
下载地址(官方提供):
Instant.zip
10、图片斜光立体效果( Bevel.js)
这个脚本能使图片产生立体的效果,犹如水晶按钮般,还会产生阴影
跟Glossy.js差不错,但立体程度与光泽有所区别。效果如下:
![点击在新窗口中浏览此图片 点击在新窗口中浏览此图片](https://i-blog.csdnimg.cn/blog_migrate/6874d2c5eadd8730144b377315b4a49b.jpeg)
以下为引用部分
下载地址(官方提供):
Bevel.zip
应用以上图片效果在网页方法:
下载解压后上传到空间,然后在需要显示效果的页面内head标签里添加入以下代码(示范倒影效果reflex.js):
<script src="reflex.js" type="text/javascript"></script>
然后,在想要显示图片处理特效的图片img标签里添里加入class类参数,例如:
<img src="image.gif" alt="" class="reflex" />
更详细可到官方网站查看。本身下载回来的文件里面也有详细用法介绍
然后,加上该class的图片就会有倒影的效果了。
其它图片处理特效添加方法相同。