10个能用JavaScript实现的图片特效

阅读时间 3 分钟，快速阅读仅需 1 分钟。

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

1、水倒映

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

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

js下载链接

2、圆角+阴影

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

js下载链接

3、高光圆角阴影

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

js下载链接

4、斜光阴影效果

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

js下载链接

5、相框效果

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

js下载链接

6、黑色相框

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

js下载链接

7、放大镜

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

js下载链接

8、菲林效果

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

js下载链接

9、花边效果

很简单的图片花边效果。

js下载链接

10、翻页效果

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

js下载链接

安装使用方法：

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

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

然后，在想要显示特效的图片的<img>标记里添加：

class="glossy"

这样效果就出现了。

其它效果添加方法类似。

via BlogOhblog。

43 条评论

不错！学习了！！

(0) (0)

[…] 原文地址：http://www.kenengba.com/post/432.html […]

(0) (0)

不知道浏览器之间兼容么
效果很好

(0) (0)

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。 […]

(0) (0)

非常不错。

(1) (1)

(0) (0)

很需要这些js，可是太遗憾了，下载不了了，恳请博主能不能共享给我，谢谢。

我的联系方式：
mail：[email protected]，
oicq：9780511

(1) (1)

Jason Ng说道：

2008 年 8 月 26 日下午 8:27

在每种效果的链接里你能找到download链接。

(0) (0)

回复

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

(0) (0)

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 1、编辑网页在地址栏输入下面的代码按enter，网页上所有元素都能变成可编辑状态，你可以移动、调整元素大小。如果你只是讨厌某个网站想发泄一下，我建议你使用NetDisater。代码如下： javascript:document.body.contentEditable=’true’; […]

(0) (0)

谁能教教我怎么用？

(0) (0)

不错，顺便推荐一下我写的能给图片加评论的js。
http://su27.org/2009/02/23/pspot/

(0) (0)

效果好像不错哦，试一下。

(0) (0)

很不错

(0) (0)

那位再给加个运动的效果就更酷了，自己先试了……

(0) (0)

[…] 新闻来源:可能吧这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。[separator] […]

(0) (0)

直接PS好省事多了，写代码既麻烦又增加内存

(0) (0)

发表回复取消回复

Ystar灬龙子说道：

2008 年 5 月 7 日下午 2:06

不错！学习了！！

(0) (0)

回复
[图]Blogger必修:10个能用JavaScript实现的图片特效说道：

2008 年 5 月 17 日下午 5:47

[…] 原文地址：http://www.kenengba.com/post/432.html […]

(0) (0)

回复
阿草哥说道：

2008 年 5 月 19 日上午 9:27

不知道浏览器之间兼容么
效果很好

(0) (0)

回复
5个有趣的浏览器地址栏JavaScript代码 » 面面的博客说道：

2008 年 7 月 18 日下午 9:55

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 […]

(0) (0)

回复
5个有趣的浏览器地址栏JavaScript代码 | ThinkIP™说道：

2008 年 7 月 18 日下午 11:18

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。 […]

(0) (0)

回复
XEIM说道：

2008 年 7 月 19 日上午 1:52

非常不错。

(1) (1)

回复
Okiba » Blog Archive » 5个有趣的浏览器地址栏JavaScript代码说道：

2008 年 7 月 19 日上午 4:50

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 […]

(0) (0)

回复
5个有趣的浏览器地址栏JavaScript代码 | 享受软件说道：

2008 年 7 月 19 日上午 10:23

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 […]

(0) (0)

回复
5个有趣的浏览器地址栏JavaScript代码 | SongsoSpace说道：

2008 年 7 月 19 日下午 8:49

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 […]

(0) (0)

回复
Azone’s Blog » Blog Archive » 5个有趣的浏览器地址栏JavaScript代码说道：

2008 年 7 月 24 日下午 11:44

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 […]

(0) (0)

回复
8511dingding说道：

2008 年 8 月 26 日上午 11:13

很需要这些js，可是太遗憾了，下载不了了，恳请博主能不能共享给我，谢谢。

我的联系方式：
mail：[email protected]，
oicq：9780511

(1) (1)

回复
- Jason Ng说道：
  
  2008 年 8 月 26 日下午 8:27
  
  在每种效果的链接里你能找到download链接。
  
  (0) (0)
  
  回复
10个能用JavaScript实现的图片特效 - LeNgHoSt的小窝 - I did it my way, ‘Cause it’s my life!说道：

2008 年 8 月 30 日下午 8:11

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

(0) (0)

回复
axengine » Blog Archive » 5个有趣的浏览器地址栏JavaScript代码说道：

2008 年 10 月 12 日下午 6:53

[…] 这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。 1、编辑网页在地址栏输入下面的代码按enter，网页上所有元素都能变成可编辑状态，你可以移动、调整元素大小。如果你只是讨厌某个网站想发泄一下，我建议你使用NetDisater。代码如下： javascript:document.body.contentEditable=’true’; […]

(0) (0)

回复
mimi说道：

2009 年 1 月 7 日下午 5:29

谁能教教我怎么用？

(0) (0)

回复
su27说道：

2009 年 3 月 8 日下午 4:53

不错，顺便推荐一下我写的能给图片加评论的js。
http://su27.org/2009/02/23/pspot/

(0) (0)

回复
aiweb说道：

2009 年 5 月 7 日上午 11:48

效果好像不错哦，试一下。

(0) (0)

回复
king说道：

2009 年 6 月 6 日下午 1:28

很不错

(0) (0)

回复
fantasy0707说道：

2009 年 6 月 14 日下午 9:19

那位再给加个运动的效果就更酷了，自己先试了……

(0) (0)

回复
5个有趣的浏览器地址栏JavaScript代码 | shu-live说道：

2009 年 9 月 20 日上午 10:49

[…] 新闻来源:可能吧这又是一篇关于Javascript的文章，上一篇是10个可以用javascript实现的图片特效。这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了，字体放大、显示所有图片、显示Cookie等等。但这篇文章重点放在“有趣”上面，当你无聊的时候，不妨玩玩。原文来自BlogOhBlog。[separator] […]

(0) (0)

回复
yanminjun说道：

2009 年 10 月 4 日上午 9:58

直接PS好省事多了，写代码既麻烦又增加内存

(0) (0)

回复

mingming on 留言板: “怎么找不到在哪里发布自己的文章呢” 4 月 17, 16:45

星星点灯 on 为什么我坚定不移地抵制百度？: “看了这篇心情日记，了解了一些过往，心里不…” 3 月 26, 17:40

EK on 那么，我是如何使用 ChatGPT 的: “简单重复的工作我倒是更多地直接做成程序功…” 1 月 25, 15:22

fisio on 那么，我是如何使用 ChatGPT 的: “隔年更” 1 月 25, 11:07

王光卫博客 on 微信视频号（短内容）想要什么？: “这些产品，只要玩的精，就不会淘汰” 1 月 21, 00:20

10个能用JavaScript实现的图片特效

Post navigation

43 条评论

发表回复 取消回复

发表回复取消回复