花儿开了 » javascript

qGallery – 非常酷的 Javascript 画廊

iStef — Thu, 03 Apr 2008 16:06:00 +0000

qGallery 是一个 Javascript 写成的画廊程序 (Gallery)，利用了 Prototype JS 库，效果非常非常的酷，而且功能非常强大。

我本人一直比较痴迷于这些 Javascript 实现的特效（当然这其中有我不怎么会 Flash 的缘故），平时也很喜欢收集这些脚本，留着以后使用或是研究。qGallery 是最新看到的一个，看了一眼就很喜欢。它不同于以前推荐的那些 JS 图片展示脚本。qGallery 自身有非常强大的相册管理功能，相册的展示方式非常别致。进入相册后看完整的照片，那效果就更酷了，甚至可以选择类似 CoverFlow 的效果。

从作者的页面上我们可以了解，qGallery 的使用也是非常简单。一个 DIV，几行代码和一个 XML 就能搞定。想做在线相册的朋友可要盯紧这个好东东了。

虽然作者还没有发布，但我还是通过查看源码的方式窥探了一下 qGallery。qGallery 使用了强大的 Javascript 库 Prototype。发现最近见到的几款酷得不行的 JS 代码都是用 Prototype，而不是我钟爱的 jQuery，难道逼我回归 Prototype ？

qGallery 还没有发布，不过在作者网页看这个完成度，估计离发布也不远了。最近要紧盯这个网站，千万别错过这个好东东。

ProtoFlow – Javascript 实现的 CoverFlow 特效

iStef — Sat, 15 Mar 2008 15:11:44 +0000

用过 iTunes、iPod Nano 2/iPod Classic 或是 iPod Touch/iPhone 的朋友，都会对苹果切换唱片那个 CoverFlow 效果印象深刻。确实，这个展示方式不仅酷，而且很好的利用了有限的空间展示出更多内容。

对于网页设置中，早已经有用 Flash 实现的 CoverFlow 效果。今天介绍这个是一个纯用 Javascript 写成的 CoverFlow，名为 ProtoFlow。效果非常的不错，而且全部由 Javascript 写成（包括动画效果和图片倒影），很适合我这种不喜欢（或者说不会 -_-b）Flash 的人。

ProtoFlow 使用的是 Prototype 和 Scriptaculous 这对 Javascript 特效黄金组合，图片倒影使用的是 reflection.js。话说 Prototype+Scriptaculous 确实在实现绚丽效果方面颇有天赋，像 Lightbox 等等都离不开这俩库。只可惜我是个 jQuery Fans，估计真要是用的话，还是得用 jQuery 重写一下。

演示和官网都在这里，喜欢的自取。如果您用到您的作品中发现效果不错的话，别忘了留言让我去欣赏一下哦。

Lightview 2 – 很酷的 JS 展示效果

iStef — Thu, 28 Feb 2008 16:17:55 +0000

如今的网站，想要抓住访客的眼球，仅仅内容优秀已经不够了。对于一个成功的网站来说，良好的 UI 同样是非常重要的环节。随着像 Firefox 3、Opera 9.5 这样强悍的浏览器的来临，Javascript 的执行效率大大提升，实现绚丽的网页特效也不再是 Flash 的专利了。

Lightview 2 就是这样一个 Javascript 程序，可以让用户很轻松的实现非常酷的展示效果。Lightview 2 的效果类似与我们熟悉的 Lightbox，但 Lightview 更为强大。关于 Lightview 到底能实现什么效果，用语言形容似乎总是不太准确，您可以先到这里去看看演示。

Lightview 可以展示的内容不仅仅局限于图片和相册，文字、网页、通过 Ajax 调用的内容甚至 Quicktime/Flash 影片都可以用非常酷的效果呈现。这一点对于 Web 设计者来说是非常有用的。借助这个特性，Lightview 不仅仅可以作为图片/相片的一种呈现方式，还可以作为交互对话框来使用，绚丽的效果详细一定会令你的网站加分不少。

Lightview 2 非常容易集成和使用，在页面的中载入必要的文件后，仅需在需要激活 Lightview 的链接上加入 class=”lightview” 即可。相信即使是不太懂 HTML / Javascript 的朋友也可以轻松使用它。

Lightview 2 使用 Prototype 和 Scriptaculous 实现特效。但由于我更喜欢短小的 jQuery，否则的话早就将 Lightview 集成到新的模板中了。如果您的站点使用的是 Prototype 框架，可以考虑尝试一下 Lightview，肯定会给您的访客带来全新的体验。

实用的 Javascript Shell – Jash

iStef — Wed, 12 Dec 2007 15:09:33 +0000

今天实验室上网时找到了 Jash 这个好东西。一见倾心，爱不释手，所以决定给大家介绍一下。

Jash 是个完全由 Javascript 写成的，Javascript 命令行。利用 Jash Bookmarket，你可以轻松的在任何网页上打开一个类似 Shell 的 Javascript 窗口。而通过在这个窗口中打入 Javascript 语句，你可以轻松的执行他们并立刻看到结果。

每个 WebDeveloper 肯定都会有几个自己常用的调试工具。我个人非常喜欢的一个是 Firebug，用它来调试 CSS 或者 Javascript 都非常的方便。但 Firebug 离不开 Firefox，到了其他浏览器上，Firebug 就爱莫能助了。现在有了 Jash 一切就都变得简单了。因为在 Jash 中，我们敲入的命令行都是基于当前页面的 DOM 环境来执行的，因此我们可以轻松的通过命令来“篡改”页面上的一切，从而达到快速调试的目的。这种调试方法对于调试 CSS 和 Javascript 特别实用。

Jash 兼容 IE/Firefox/Safari 等主流浏览器，而更酷的是，Jash 完全是一个开源的程序。如果您觉得使用作者提供的 Bookmarket 不够快的话，完全可以将 Jash 的代码下载回来放到自己的服务器上调用。而且你还可以去修改 Jash 的代码，实现更酷的功能。

个人觉得，Jash 是个很不错的代码，即使你现在用不到，但还是很值得收藏它。

每日荐网：Cachefile

iStef — Tue, 20 Nov 2007 14:18:13 +0000

连续推荐了好几天网站，其实都是从我的订阅列表中挖出来的，所以大多是博客。今天这个网站是在 Slashdot 上看到的（原链接懒得找了 -_-b），是个超简单的服务网站——CacheFile。

随着 Web 2.0 的流行，Cache 这个概念被带到越来越重要的位置。虽然 Web 2.0 服务多种多样，但大多网站都会使用一些通用的东西，例如 Javascript 框架和订阅图标。CacheFile 就是一个存放这种通用文件的地方，你可以在你的应用中直接引用 CacheFile 所提供对应文件的链接，节省服务器带宽，同时也提高用户体验。

其实 CacheFile 是个非常简单的服务，但我在这里之所以推荐它，是因为这个网站的思路非常不错。Javascript 框架和订阅图标等资源，在不同网站间，有很大程度的一致性和通用性，但由于隶属于不同域名，用户在访问不同网站时，不得不重复下载这些资源，浪费服务器流量的同时，也增长了用户的下载时间，降低用户体验。我们举个例子，例如 jQuery 这款出色的 Javascript 库，在很多网站上都有使用。传统方法，如果 A/B/C 三个站都使用了 jQuery，那么用户 U 访问者三个站就不得不分别从 A/B/C 下载三份同样的 jQuery；但如果 A/B/C 三个站点都从 CacheFile 引用 jQuery 的话，那么由于浏览器的缓存，用户 U 很可能只需从 CacheFile 下载一次 jQuery。也许一两个网站，这种体验的提升还不明显，但如果使用的网站增加，改善肯定会相当明显。

CacheFile 目前仅仅提供 Scripts 和 Graphics 两种资源，图形方面只提供了各式各样的 RSS 订阅图标供使用；Scripts 方面则基本提供了所有流行的 Javascript 代码库，包括 MochiKit/aflax/dojo/ext/jQuery/mootools/prototype/yui，基本已经非常全面了。对于 Web 2.0 开发者来说，应该是够用了。

当然，CacheFile 也有它的问题。首先，在我这里访问 CacheFile 还不够快，如果能在世界各地多提供一些 CDN 加速的话会更加实用；其次，把代码都交到一个地方这种中心化的做法，一定程度上降低了服务的稳定性。不过我个人觉得，CacheFile 的思路非常好，如果想 Google 或微软这种服务器众多、带宽充裕的大公司来维护这样的服务的话，对于解决 Web2.0 开发中面临的这类问题，还是非常实用的。

PopBox! 又一个很酷的 Javascript 图片缩放效果

iStef — Tue, 06 Nov 2007 15:13:30 +0000

PopBox! 是一段 Javascript 写成的网页特效代码，通过使用 PopBox，你可以让你网页上的图片获得与众不同的效果。

网页图片特效代码有很多，其中最出名的要数 LightBox 了。LightBox 虽然很酷，但全世界人民都在使用，看多了也就不新鲜了。这时候你不妨换上 PopBox! 试一试，绝对让你有焕然一新的感觉。

PopBox! 实现的也是图片的缩放效果，但不同于 LightBox，PopBox 不会把你的屏幕变暗，而是以动画的形式从缩略图动态放大为图片的原始大小。我本想做个图片来表达这个效果，但发现无论是语言还是静态图片都很难表述清楚。您可以看看作者的网站，或是我做的这段小视频，就知道是怎么回事了。

<\/param><\/param><\/embed><\/object><\/div>";" alt="">

当然，PopBox! 提供了很多参数，以便我们实现各种各样的效果。例如调整缩放位置，缩放方向，缩放比例等。这是 LightBox 不能实现的。而在使用方面，PopBox! 可以很方便的嵌入现有的网页，我们只需要在 Header 部分装载代码，并对需要缩放的图片代码进行小小的改造就可以实现了，非常简单。当然，具体方法还是看看作者网站和相关文档，这里就不罗嗦了。

PopBox! 免费开源，容易嵌入，是个很值得收藏的代码。不知道有没有人愿意将它做成 WordPress 插件呢？应该不难的。

Javascript 小游戏：Be Quick or Be Dead

iStef — Mon, 08 Oct 2007 16:29:48 +0000

Be Quick or Be Dead 是一个简单的小游戏，无论画面还是游戏方式都没什么亮点，但在这里介绍它是因为，这个在浏览器中“跑”的小游戏是完完全全用 Javascript 写成的。

Be Quick or Be Dead 其实可以看作是一款演示程序，或者说是 Javascript 习作。这个小游戏所使用的 Dojo GFX Library 是最近突然很流行的一款 Javascript 函数库。Dojo 目前已经应用在很多商业应用中，例如 Technorati，新版 Bloglines 等，十分的强大。

此外，如今流行的 Javascript 函数库还有老牌的 Prototype，MooTools 等等。而我最近也在开始学习使用 jQuery 进行 Javascript 开发。这些 JS 函数库不仅给开发带来了方便，更重要的是，通过使用他们，可以一定程度上改变程序员思考问题的方式。

Javascript 如今应用越来越广泛了，而 Ajax 这样的技术甚至引起了整个互联网的一场革命。就在不久前，甚至出现了一款 Linux 桌面就是使用 Gecko 核心，全部桌面效果都由 Javascript 写成的 OS。相信这在 Javascript 创建之处，任何人都是想不到的。

GreaseMonkey: 让 Yahoo! 搜索结果使用真实地址

iStef — Tue, 21 Aug 2007 15:50:38 +0000

我原以为这年头大家都 Google 百度了，看来用 Yahoo! 搜索的还是大有人在。虽然我自己很少使用，但今天小敖通过 Gmail 向我求助，希望实现这样的功能：

Yahoo! 英文搜索的搜索结果页面中，链接全部为 Yahoo! 的统计/跟踪地址，而不像 Google 搜索那样使用原始地址。这给平时使用（例如我们常用的右键点击“复制链接地址”）造成了不便。希望能有一款插件将这个地址替换为原始地址。

很显然，干“篡改”网页这种事，强大的 GreaseMonkey 再合适不过了。于是花了 20 分钟写了这个简短的脚本，实现了这个功能。如果您有同样的需要的话，可以通过这个链接下载。别忘了先装 Firefox 和 GreaseMonkey 啊。

事实上，所有搜索引擎都会跟踪用户的点击，Google 也不例外。只是 Google 采用比 Yahoo! 聪明一点的方式，先拦截你的 onmousedown 事件，改变 location.href 后再 return false。这样原来 href 中的链接就不起作用了，实际访问的还是带有追踪脚本的链接。搜索引擎统计用户点击可以收集用户数据，从而分析用户行为，有利于生成更准确的搜索结果。

当然，我在设计这个脚本时也考虑过使用 Google 这种方式，使用 onmousedown 事件访问带有统计的链接。但是我发现使用 addEventListener 方法，即使我的函数最后 return false; 原有的链接还是有效。不知道有什么好方法可以将它屏蔽掉，还希望这方面的高手指点一下。

CodePress: 支持语法高亮的在线编辑程序

iStef — Thu, 09 Aug 2007 12:44:27 +0000

CodePress 是一个完全用 Javascript 写成的 HTML Textarea 增强程序，利用它，你只需要简单的修改，就可以将你网页中的 Textarea 变成一个支持语法高亮的程序编辑器。CodePress 完全开源，非常容易集成。

CodePress 支持众多语言语法高亮，例如 PHP, Javascript, Java, Perl 等等，而且作者还在陆续添加更多语言支持。我查看了 CodePress 的代码，良好的架构使得 CodePress 扩展新的语法高亮规则非常容易，如果你的项目需要一个特殊的语法的话（例如 Smarty），完全可以自己动手来制作一个。

CodePress 非常容易集成，具体安装方法可以看看作者的页面，这里就不重复了。高速、众多语法支持和便于集成使得它有很不错的应用前景，例如我们可以将其集成到 phpMyAdmin 的 SQL 输入界面中，或者集成到很多主机面板（例如 Cpanel）的 Web 文件管理程序中。有这样一个全功能的在线程序编辑器，我们在线上调试程序时绝对方便不少。

CodePress 貌似已经推出一段时间了，甚至万能的 WordPress 已经有了利用 CodePress 制成的插件。安装这个插件后，WordPress 后台的 Theme Editor 编辑框将被 CodePress 代替。对于主题作者来说，这样修改主题实在太方便了。

越来越感受到 Javascript 的强大了，都说 Web 2.0 变革了整个网络，而事实上，支撑着整个 Web 2.0 的东西，是那个不起眼的 Javascript。

AJAX 版的 Google Talk

iStef — Mon, 06 Aug 2007 15:53:00 +0000

看图，演示在这里。作者貌似在线，激活后不妨和他聊一聊。

区别于 Flash 版本的 Google Talk Gadget，这个网页版的 GTalk 是由纯 Javascript 写成的，而且也不是由 Google 官方开发的，作者 Zhou Renjian 貌似是个中国人吧。

作者貌似是用 Java 写成了这个兼容 Google Talk Jabber 协议的客户端，然后通过 java2script 转换为 Javascript，然后在进行大量的优化而成。同时作者推荐使用 Firefox 或 Opera 来浏览测试页面，因为 IE 的 Javascript 执行效率实在太低了。

目前这个项目还在 beta 阶段，不过基本 GTalk 的功能都有了，截图中就是我和作者聊天的界面，真是非常像 Google Talk。比较出乎我意料的是，这个程序发送和接收消息的速度都非常快，感觉不像是 AJAX 可以实现的，莫非是利用了 Gmail with Talk 中类似的 comet 技术？

有兴趣的朋友可以试试。当然，如果这个项目是个开源项目的话，大家可以一起来研究就更好玩了。