50个令人惊奇的jQuery插件(表格布局、滚动条和背景图篇)

本章节中的插件使用表格组织内容更加容易,它们计算出最佳方式来紧密的包裹你的内容并且实时的对齐这些内容。

25. Gridster.js

Gridster.js (github)是一个允许构建直观的可拖动布局的jQuery插件,你甚至可以动态从表格中添加和移除元素,拖动一个元素会引起其它重新组织排列并为其空出一个位置,这将有很有助于用户自己控制布局和控制面板的定制。

Gridster.js

Gridster.js

26. Freetile

Freetile (github)是一个可高效的,动态的,响应式的组织网页内容布局的插件,它可被用于一个容器元素,并且将尝试通过将其子元素紧密地排列到最优的网页空间。

Freetile

Freetile

27. Stalactite

Stalactite (github) 是一个打包网页内容的库,它依赖于可用空间,它采用懒加载方式并且当页面滚动的时候依次的排列元素,效果很有意思。

Stalactite

Stalactite

自定义滚动条

我们所要做的一些事情的其中之一就是定制默认浏览器的滚动条,一些滚动器可以支持这样,但这不能在所有地方奏效。以下两个插件可将其变为可能。

28. nanoScroller.js

nanoScroller.js (github)提供了一个实现Mac OS X Lion滚动条样式的简单化实现方式,它使用最小限度的HTML并且利用其原生的滚动,该插件同样工作于iPad,iPhone和一些案桌平板设备。

nanoScroller.js

nanoScroller.js

29. jQuery Custom Content Scroller

jQuery自定义内容滚动条 (github) 是一个用可用CSS自定义的自定义滚动条插件,特性包括垂直/水平滚动,鼠标滚轮支持(通过jQuery mousewheel plugin),滚动按钮,平滑的惯性滚动,自动调节滚动条长度,可嵌套滚动条,scroll-to方法支持,用户定义callback函数及更多,功能很强大,译者推荐。

jQuery Custom Content Scroller

jQuery Custom Content Scroller

背景

全屏背景一另外一种流利设计趋势,下列这些插件目的是使其简单地设置一个独立图像,一组画廊或甚至一个视频作为背景。

30. Tubular.js

Tubular.js 是一个可让你设置一个YouTube视频作为你的网页背景,仅仅把它添加到你网页的wrapper元素上,设置一些选项,如下所示:

$(‘#wrapper’).tubular({videoId: ‘0Bmhjf0rKe8’});

该插件同样支持用play/pause控制视频,设置音量和更多。

Tubular.js

Tubular.js

31. Backstretch

Backstretch (github) 是一个简单的jQuery插件,允许你向任何页面或元素添加一个动态可缩放的,可滑动展示的背景图片。它将拉伸任何图片来适应页面或块级元素,并且当窗口或元素尺寸改变时将自动重新缩放,图片是在你的页面加载完成后获取的,所以你的用户在使用你网站时不用去等待图片(通常很大)下载,出于好奇,如果不想使用插件,同样也还有一种技术可以实现 简单地用CSS设置一个全屏背景图片

Backstretch

Backstretch

32. Supersized

Supersized (github)是一个高级的全屏背景图片插件,使用它你能以页面的宽高展示一组图片作为幻灯,这使它很适合图片网站,职业或实事站点,该插件带有很多选项,支持多转换效果并且能自定义主题。

Supersized

Supersized