当前位置: 首页 > 图文教程 > 网站运营 > 建站经验 > Blogger必修:10个能用JavaScript实现的图片特效

建站经验
经验探讨 用户体验与搜索引擎优化的结合
让你的网站产生Google Sitelinks的六个要素
凸显使用体验 网站导航最受美国厂商关注
外国人眼中网站设计和网站建设二十个原则
网站更换域名应该注意的八个方面
五年经验告诉你 细节决定网站成败
新网站如何提高流量
稳中求升 购买付费链接应注意的九个问题
经验越多下手越难 你能抛弃你所学习的吗
站长进行设计网站时必须注意二十三个方面
路径突破 谈谈英文站比中文站更能做成功
谈谈网站运营中的关键的一环 团队的管理
最原始的东西最有价值 致天下所有创业者
名博怎样练成 析月光博客成功的六个原因
学生站长持续自己的冬天 仍坚守春天的期待
关于对web的分析 获得可行动的认识和度量
五个月前后五次改动 让我的流量稳在五万
亲手关闭自己论坛 泣血奉献一些心得经验
用户体验指导思想 易用友好 把用户当傻瓜
网站如何将用户体验与搜索引擎优化相结合

建站经验 中的 Blogger必修:10个能用JavaScript实现的图片特效


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-17   浏览: 214 ::
收藏到网摘: n/a

一般来说,我们在写博客或做网站时都需要对插图做一些效果,比如增加阴影、图片圆角、倒映等等。这些效果一般可以用3个方法实现,一是用PS实现对图片进行修改,二是使用CSS,三是使用JavaScript。使用PS会破坏原图,而且要花费一定的时间。Netzgesta上有很多实现图片特效的JavaScript提供下载,很多效果都是相当漂亮的。

1、水倒映

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

这个js将为图片添加水倒映的特效,时下web2.0站点很喜欢这种效果。

如果你喜欢在线生成水倒映效果,可以参考这里

js下载链接

2、圆角+阴影



或许你记得用RoundPic能在线生成圆角图片,事实上用这个js也可以实现效果。

js下载链接

3、高光圆角阴影

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

这个效果可以用来做按钮。是我最喜欢的特效之一。

js下载链接

4、斜光阴影效果



和上面的效果看起来非常相似,但也有不同的地方。

js下载链接

5、相框效果

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

如果你在做图片博客,可以你会喜欢这个js,使用后博客文章内的图片都有相框的效果。

js下载链接

6、黑色相框



不喜欢白色没有立体感的相框,那试试这个立体感充足的js效果吧。

js下载链接

7、放大镜

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

一个很有趣的js,实现放大镜效果。记得在去年Google开发者日的时候,某个主讲人也有说到在GMaps里实现放大镜的有趣效果。具体效果点击这里

js下载链接

8、菲林效果



如果你在写一个电影博客,这个效果或许会让你喜欢。

js下载链接

9、花边效果



很简单的图片花边效果。

js下载链接

10、翻页效果

10个用能用JavaScript实现的图片特效(可能吧 www.kenengba.com)

翻页效果是很常见的,Google一下你会发现有很多相关的教程,如果你不想花时间去学,直接下载这个js吧。

js下载链接

安装使用方法:

将下载的压缩包解压之后上传到网站空间,然后在需要显示效果的head里添加代码,比如高光阴影效果Glossy,添加的代码是:

<script type="text/javascript" src="glossy.js"></script> 

对于Wordpress,可以在header.php里添加。如果只要求文章页里出现效果,也可以考虑在single.php里添加。

然后,在想要显示特效的图片的<img>标记里添加:class="glossy"

这样效果就出现了。其它效果添加方法类似。