Firefox版本

该插件基于Firebug，所以安装前请确保已经安装Firebug。

一些主要特性；

• 即时编辑——即改即现，把Firefox打造成超强网页编辑器；
• 与Fiddler一起使用，快速调试线上网页，HTML代码快速生成；
• 刷新CSS，DOM不刷新；
• 禁用单个CSS样式；
• CSS Sprites位置快速设定；
• 保持Session不过期；
• 导出任意节点为PNG图片；

现在就安装（从火狐官方下载1.6版）

下载1.7版本低安装 via ued.alipay.com

推荐查看作者的博客，里面有几篇介绍该插件的文章。你也可以查看Alipay的UED的介绍。

IE版

非常不错的是，该插件同时也提供了一个IE版本，安装很方便就是下载文件：http://nihaoku.cn/Linr/LinrIEGallery.reg 下载下来后运行reg文件，右键菜单就会出现“点亮网页”选项，重启IE内核的浏览器，然后右键选择“点亮网页”即可使用。

推荐查看IE版本的官方介绍。

另外作者在博客中透露Chrome版本也在开发中，很快就会面世，让我们一起期待吧。

查看点亮网页+Fiddler的视频演示
查看LinrLightWeb(Firefox Add-on)功能浏览
下载观看点亮网页操作CSS Sprite的动画

预览：

下载地址：https://addons.mozilla.org/en-US/firefox/addon/10704 主页地址：http://spaghetticoder.org/cssusage/

用法：

• 打开你想要扫描的网站的页面，打开Firebug，切换到CSS Usage标签，然后点击”scan”按钮。
• 如果是用了大量ajax或者dhtml的网站中，打开尽可能多的隐藏的div/窗口/tab，以使CSS Usage爬取尽可能多的内容。
• 然后访问你的网站的其它页面。
• 每访问一个新的页面，请按一次”scan”按钮。当然，也可以选择autoScan按钮，这样就不用每次按Scan按钮了。

扫描的结果中，绿色的规则表示当前页面中有用到，黑色表示其它页面中用到，红色表示没有被扫描到(至少在当前页面)，灰色是伪类(:hover之类)

一些特性：

• 可显示规则的行数
• 自动扫描(autoScan)
• 链接到CSS文件(可以在新tab中打开该CSS文件)

在网站前端中使用jQuery库已经变得越来越流行，前端开发人员发布或撰写的相关的插件和教程也与日俱增。

幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。你是否也对在自己的网站上实现类似的效果感兴趣？那就看一下本文列出的jQuery插件吧！

1. jFlow

官方网站 | 演示

一个漂亮而整洁的图片幻灯，被nettut推荐，如果你想自己做一个图片幻灯效果，就去看看吧。

2. 使用jQuery UI实现推荐内容的幻灯展示

官方网站 演示

这是一个教你如何“使用一种很有冲击力的方法展示你的网站/博客的最佳内容以吸引更多眼球”的很不错的教程。该文章介绍展示推荐内容的技术中的一个是自动播放内容幻灯。

3. 创建漂亮的jQuery幻灯教程

官方网站 | 演示

该教程介绍如何开发/创建漂亮的使用图片描述和名称的jQuery幻灯。

4. 基于jQuery的一个简单的内容幻灯效果

官方网站 | 演示

Brenelz的网站开发技巧的一个简单的内容幻灯效果。

5. JC Play List

官方网站 | 演示

免费而好用的使用Flash组件创建的一个jQuery幻灯插件，特别是对XML、RSS2.0、Picasa和Flickr等多媒体列表等非常方便。

6. Easy Slider

官方网站 | 演示

一个JQuery插件，允许图片或任何内容在点击的时候水平/垂直滑动。

7.jqGalScroll

官方网站

jQuery Gallery Scroller (jqGalScroll)使用图片列表，并创建一个光滑的可以垂直、水平或对角滚动的图片相册。该插件同样能创建分页，从而你就可以轻松的浏览你的照片了。

8. Image Gallery

官方网站

这个一点儿都不复杂——它是一个非常简单的图片画廊/查看器。你可以像这样调用图片:

9.使用jQuery UI 制作内容幻灯

官方网站 | 演示

Dan Wellman为NetTuts写的教程，很详细。

10. 创建一个自动播放的推荐内容幻灯

官方网站 | 演示

来自CSS-Tricks的Chris Coyier 写的一篇教程。该脚本基于Coda Slider。它包含一些扩展的特性：

11. slideViewer

官方网站

SlideViewer是一个轻量的(1.5Kb)jQuery插件，它可以让你随时通过编写几行HTML代码来创建一个图片画廊.

12. Start/Stop Slider

官方网站 | 演示

13. 一个简约的jQuery插件

官方网站 | 演示

WebDesignBooth的一个教程，介绍如何使用强大的jQuery库创建简单的内容幻灯效果。

14. BarackSlideshow

官方网站 | 演示

一个灰常小巧和轻量的幻灯脚本，灵感来自于美国总统Baracka Obama网站的一个幻灯效果。该脚本获取MorphList的能力，并增强图片的可视化和导航。

15. 使用JQuery s3Slider的wordpress模板

官方网站 | 演示

在WP中使用JQuery s3Slider插件来创建幻灯内容。

其实，jQuery的幻灯插件并不只这些，还有CodaSlider、JQuery Cycle Plugin等，当然有些只只能用在图片的，而大部分是可用于内容的。如果你有遇到比较好的插件或技术本文没有提到，欢迎在评论中给我们提出——神飞

大家都很喜欢Lightbox弹框效果，这种效果在很多地方都很有用。而原始的Lightbox脚本已经被无数次的克隆到了所有的流行Javascript库中。上周我们看了10个最佳jQuery Lightbox效果插件收集，现在，让我们看看Mootools框架下的10个最佳的Lightbox效果插件收集。

Smoothbox

支持媒体: Images, Inline HTML, Ajax, iFrame

查看演示

下载

Multibox

支持媒体: Images, Inline HTML, AJAX, iFrame, Flash, Video

查看演示

下载

RoeBox

支持媒体: Images

查看演示

下载

Litebox

支持媒体: Images

查看演示

下载

Milkbox

支持媒体: Images, Flash

查看演示

下载

Slimbox

支持媒体: Images

查看演示

下载

ImageZoom

支持媒体: Images

查看演示

下载

mediaboxAdvanced

支持媒体: Images, Inline HTML, AJAX, iFrame, Flash, Video

查看演示

下载

QuickBox

支持媒体: Images

查看演示

下载

ReMooz

支持媒体: Images, Inline HTML

查看演示

下载

大家都很喜欢Lightbox弹框效果，这种效果在很多地方都很有用。而原始的Lightbox脚本已经被无数次的克隆到了所有的流行Javascript库中。本文特别收集了10个最佳的Lightbox效果插件，所以收藏本文吧，不定什么时候你就用到了……

jQuery Lightbox Plugin

支持的媒体类型： Images

演示

下载

Fancybox

支持的媒体类型： Images, Inline HTML, iFrame

演示

下载

Shadowbox

支持的媒体类型： Images, Inline HTML, iFrame, AJAX, Flash, Video

演示

下载

ThickBox

支持的媒体类型： Images, Inline HTML, iFrame, AJAX

演示

下载

Slightly Thickerbox

支持的媒体类型： Images, AJAX, Video

演示

下载

Fancy Zoom

支持的媒体类型： Images, Inline HTML, Flash

演示

下载

Facebox

支持的媒体类型： Images, Inline HTML, AJAX

演示

下载

nyroModal

支持的媒体类型： Images, Inline HTML, iFrame, AJAX, Video

演示

下载

Interface Imagebox Demo

支持的媒体类型： Images

演示

下载

piroBox

支持的媒体类型： Images

演示

下载

Greybox Redux

支持的媒体类型： Images, iFrame

演示

下载

prettyPhoto

支持的媒体类型： Images

演示

下载

这个插件有以下几个特性:

• 测量你的页面的CPU占有率和内存占用；
• 回顾页面渲染时的屏幕截图；
• 回顾页面生命周期中每个关键点的HTML渲染；
• 查看页面在不同的连接速度中，渲染(页面显示)估计需要的时间；
• 根据已经经过证实的一些“最佳实践”规则（这些规则类似YSlow和PageSpeed）验证页面内容。
• 回顾页面加载是下载的资源（图片/js/css等），以及这些资源所花费的时间

浏览器支持：IE6+。

项目源码：http://code.google.com/p/msfast/

注意：改工具目前尚处于pre-alpha 状态，只是刚刚可以用，还会有很大的改进，而从pre-alpha到alpha、到beta、到RC…会是一个很漫长的过程，但是神飞认为，这是目前对前端开发人员来说，是IE平台下最好的工具之一。所以，这个插件值得等待，希望MySpace的开发人员不会让我们失望。

插件

LavaLamp

相信很多人都见过这个很酷的菜单插件，也有很多网站成功的应用了这个插件。

插件主页

jquery Kwicks 插件

如果你多Mootools有些了解，或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效果，很酷，也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单，制作某些步骤演示也非常合适——比如购物流程的演示。插件主页

查看演示 | 下载

仿Mac的停靠菜单插件

这是个仿苹果机的停靠菜单的一个jQuery插件，支持水平和竖直两种。查看插件页面。

查看演示 | 下载

jquery滑动菜单

一个和LavaLamp很像的菜单，而且脚本只有不到1kb(lavalamp也是这么小)，也比较容易使用。该菜单的原理是，通过在当前ul元素的下面(或者说”后面”更合适些？)添加一个额外的div，用position定位该div。然后用jquery和插件来控制这个div的大小和位置，并实现动画效果。

查看演示 | 下载

教程

CSS Sprites2 – 使用jquery制作动画菜单

知名博客alistapart的一个关于CSS Sprites的教程，这个网站对CSS Sprites的技术的普及起到了非常重要的作用。本文的目的是介绍基于javascript的CSS Sprites技术，只是是通过制作动画菜单的例子来讲解。非常值得一读。查看教程

查看演示

使用jQuery的动画菜单

教你如何使用CSS和jquery的animate()函数改变背景色的透明度(opacity)来实现动画菜单的一个教程，讲的很详细，如果你看不懂英文没关系，能看懂教程中的代码就OK了。查看教程

查看演示

使用CSS和jquery创建很酷的动画导航菜单

Nettus推出的一个教程，非常详细的讲解如何使用CSS和jquery制作很酷的动画效果的菜单。查看教程

查看演示 | 下载源文件

CSS Dock Menu

来自www.ndesign-studio.com的一篇使用CSS制作停靠菜单的教程，使用了jquery机器FishEye插件。查看教程

查看演示 | 下载

使用jquery制作平滑的动画导航

一个很不错的导航效果，这个教程很详细的讲解了制作这个菜单的步骤。使用了jquery的easing组件。查看教程

查看演示 | 下载

使用jquery实现动画背景图片

这是一个教程，作者结合了上面提到的CSS Sprites2教程，结合jquery 背景动画插件来实现的一个效果。这个效果很不错，很酷。查看教程。

查看演示 | 下载