50款 jQuery 插件集锦——《网页布局篇》 （转）

Zoomooz.js

Zoomooz.js 是一款易于使用的插件，能使任何网页元素放大，支持 3D 转换。使用示例：

1 2 3 4 5 6

$(document).ready(function() {     $("#element").click(function(evt) {         $(this).zoomTo({targetsize:0.75, duration:600});         evt.stopPropagation();     }); });

　　插件下载     效果演示

 

equalize.js

equalize.js 是一款非常有用的 jQuery 插件，用于均分元素的宽度或者高度。使用示例：

1 2 3 4 5 6

$('.parent').equalize('height'); // default, same as above $('.parent').equalize('outerHeight'); $('.parent').equalize('innerHeight'); $('.parent').equalize('width'); $('.parent').equalize('outerWidth'); $('.parent').equalize('innerWidth');

　　插件下载     效果演示

 

Wookmark

Wookmark 这款 jQuery 插件用于创建一个动态的多列布局。使用示例：

1	$('#myContent li').wookmark({offset: 2});

　　插件下载     效果演示

 

Freetile.js

Freetile 能够帮助你把组织内容在一个高效，动态和响应的布局中。使用示例：

1	$('#container').freetile({ animate: true, elementDelay: 30 });

　　插件下载     效果演示

 

gridster.js

Gridster 用于实现建立直观的可拖动的横跨多个列的元素布局。使用示例：

1 2 3 4 5 6 7 8

$(function(){ //DOM Ready        $(".gridster ul").gridster({         widget_margins: [10, 10],         widget_base_dimensions: [140, 140]     });    });

　　插件下载     效果演示

 

Stellar.js

Stellar.js 是一款非常优秀的 jQuery 视差滚动特效插件。使用示例：

1 2 3 4

// For example: $(window).stellar(); // or: $('#main').stellar();

　　插件下载     效果演示

 

turn.js

turn.js 是轻量的 jQuery 杂志插件，基于 HTML5 技术实现。使用示例：

1 2 3 4 5

$("#flipbook").turn({     width: 400,     height: 300,     autoCenter: true });

　　插件下载     效果演示

 

jQuery HiddenPosition

jQuery HiddenPosition 可以让你放置任何元素，即使它们被隐藏。使用示例：

1 2 3

if($('#hiddenposition-a').is(':not(:visible)')) highlightOver($('#hiddenposition-a')); if($('#hiddenposition-b').is(':not(:visible)')) highlightOver($('#hiddenposition-b')); if($('#hiddenposition-of').is(':not(:visible)')) highlightOver($('#hiddenposition-of'));

　　插件下载     效果演示

 

Responsive Measure

Responsive Measure 可以帮助你生成响应式设计中的字体的理想尺寸。使用示例：

1 2 3 4 5 6 7

$('section').responsiveMeasure({     // Variables you can pass in:     idealLineLength: (defaults to 66),     minimumFontSize: (defaults to 16),     maximumFontSize: (defaults to 300),     ratio: (defaults to 4/3) });

　　插件下载     效果演示

 

jQuery Scroll Path

压轴的 jQuery Scroll Path 是一款非常帮的自定义路径滚动插件。使用示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$.fn.scrollPath("getPath")         // Move to 'start' element         .moveTo(400, 50, {name: "start"})         // Line to 'description' element         .lineTo(400, 800, {name: "description"})         // Arc down and line to 'syntax'         .arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true)         .lineTo(600, 1600, {             callback: function() {                 highlight($(".settings"));             },             name: "syntax"         })         // Arc and rotate back to the beginning.         .arc(1300, 50, 900, -Math.PI/2, -Math.PI, true, {rotate: Math.PI*2, name: "end"});       // We're done with the path, let's initate the plugin on our wrapper element     $(".wrapper").scrollPath({drawPath: true, wrapAround: true});

　　插件下载     效果演示