标签:UI

2010年20个jQuery插件效果

今天在CSSRain的网站上看到一篇介绍jQuery最新插件的文件,这么好的东西当然要收藏了。又把插件都浏览了一遍,感觉非常实用,顺便写写注释,以便不时之需,嘿嘿。

1. Custom Animation Banner with jQuery
通过使用 jQuery Easing和jQuery 2D Transform插件,创建自定义animation banner。
View Demo(查看示例)
注:效果是常见的广告2种广告banner ,包括横向与纵向两种,支持多种图片切换效果

2. 快速反馈表 – jQuery & PHP
Martin Angelov 将教你如何快速的创建用于接收来自用户反馈的解决方案,使用到了jQuery, PHP 和 PHPMailer类。
View Demo(查看示例)

3. Wijmo – jQuery UI 组件
Wijmo是一个jQuery UI组件集,有超过30多个jQuery UI 组件;这将是一个CSS3,SVG,HTML5的混合物,目前还处于Beta阶段。
View Demo(查看示例)
注:这个很强力。包括表格切换、日历、对话框弹出层 、折叠效果、下拉菜单、进度条等等,支持多种自定义动画效果

4. 页面导航 – jQuery插件
这是一个页面上的导航插件,基于jQuery ScrollTo 插件,你可以在 Github上查看更多介绍。
View Demo(查看示例)

5. RSS Reader With jQuery Mobile
Jeffrey Way 创建了一个简单的RSS reader,主要用于iphone和Andriod手机,通过PHP和jQuery mobile 实现。
View Demo(查看示例)
注:效果很不错,但需要手机的性能也很强才成吧

6. Easy Accordion – jQuery插件
The Easy Accordion插件可以生成一个类似手风琴样子的自定义列表。
View Demo(查看示例)
注:可以用作图片新闻 的切换效果,也可用于产品的展示

7. Lettering – jQuery Typography Plugin
Lettering是一个轻量级易于使用的网页排版插件,例如印刷CSS3的海报,自定义类型的标题等。
View Demo(查看示例)
注:不是很明白,好像多数是用于排版、调整字体。

8. Annotation Overlay Effect with jQuery
创建一个简单的叠加效应
View Demo(查看示例)
注:缩放一张图片,并在上面叠加一个层,可以 为图片添加注释

9. Snippet – jQuery Syntax Highlighter
Snippet是一个很酷的jQuery语法高亮插件,基于SHJS脚本,你可以在SourceForge上找到源码。
View Demo(查看示例)
注:支持多种语法、内置多种高亮样式 、背景样式设定。如果有wp的插件,我会切换到这个吧

10. Google Powered Site Search With jQuery
教你如何创建一个自定义的搜索引擎,只需要使用Google AJAX Search API,你可以搜索到您网站上的图片,视频和新闻等……
View Demo(查看示例)
注:说明比较复杂,用起来简单 ,有人说和google的site参数返回结果不一样。更杯具的是2010年12月1日开始google已经不推荐用ajax api了 = =

11. 简单的工具提示 – jQuery & CSS
Soh Tanaka 创建一个简单的jQuery和CSS样式提示
View Demo(查看示例)
注:悬停提示,简单又好用!

12. Compact News Previewer with jQuery
创建一个文章/新闻预览,以经凑的方式显示您最想的文章或新闻。预览工具将会显示一些关于文章更长的描述。
View Demo(查看示例)
注:这个可以用作电影预览也是不错的。

13. Exposure jQuery插件
Exposure是一个图片预览插件,用于创建丰富,自定义的视觉体验。
View Demo(查看示例)

14. Giveaway Randomizer App – jQuery
它会教你如何去创建一个jQuery专用的随机数发生器。
View Demo(查看示例)

15. jQuery Smooth Tabs Plugin
jQuery Smooth Tabs是一个简单易于使用的插件,可以让你选择一些漂亮的效果来显示你的文字内容,带来更好的用户体验。
View Demo(查看示例)
注:简单易用的tab切换

16. TN34 Timetabs – jQuery Plugin
Mario Alves创建的一个tab容器的jQuery插件,可以选定不一样的样式来显示下一个tab。下载插件:HERE.
View Demo(查看示例)

17. Full Page Image Gallery with jQuery
创建一个效果惊人的滚动缩略图和滚动全屏预览的画廊。
View Demo(查看示例)

18. bgStretcher – jQuery Plugin
Background Stretcher可以让你在背景中添加一个或多个大尺寸的图片,并调整他们的大小来填满整个页面,多张图片时会以幻灯片的形式出现。
View Demo(查看示例)

19. SlideNote – jQuery插件(滑动通
SlideNote 是一个自定义,扩展性很强的jQuery插件,可以轻松的在网页或你的web应用上创建滑动通知。
View Demo(查看示例)
注:这个用作广告也是不错的

20. Easy List Splitter – jQuery插件
Easy List Splitter插件将获取到的list和wrap装入一个container div,生成相应的列表项,并且生成一个有效的HTML代码。
View Demo(查看示例)
注:要想用li实现简单的列表,又不想写css,用这个插件最方便,可以实现横排、竖排、自定义分割等等,赞啊

PNG与JPEG格式图片的区别

在很久以前,大约是在2001年前后,曾经纠结于这两种图片格式。那时候还在玩FW与PS,只知道PNG的算法要比JPEG和GIF先进,输出图片的时候尽量选择PNG格式,因为绝大多数情况下PNG的图片显示效果要好于JPEG,而且文件也会更小。但也有列外,某些图片在使用PNG格式之后图片会比JPEG噪点多了,而文件却大的很。当时非常不理解,只有一个模糊的概念,就是在自己画图的时候要输出PNG会小一些。

时至今日,看了下面的文章才真正了解:来自淘宝UED的一篇介绍PNG与JPEG格式之间区别的文章“图片格式与设计那点事儿”。文章写的非常好,结构很清晰,从概念原理到实际应用都说的很明白,并提供了大量的图片示例。从文章中了解到:
1、PNG与JPEG格式相比,在算法上确实要先进
2、在颜色很多的场景,比如写实的摄影图、颜色层次非常丰富的时候,更适合使用JPEG
3、在颜色较少,渐变少,纯色多,颜色跨度大的时候,更适合使用PNG
4、在对PNG的调色板进行优化过后可以获得更小、效果更好的图片,方便网络使用
5、在大图的时候建议使用“交错”优化
6、根据场景对图片优化,哪怕要牺牲部分效果