2012年最有用的50款 jQuery 插件集锦——《网页布局篇》-CSDN博客

2012年，众多的 jQuery 新插件发布出来，可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的，同时也是最有用的50款 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等，将陆续分享给大家，记得关注和收藏啊。

Zoomooz.js

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

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

　　插件下载效果演示

equalize.js

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

 
         $( 
         '.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 用于实现建立直观的可拖动的横跨多个列的元素布局。使用示例：

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

　　插件下载效果演示

Stellar.js

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

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

　　插件下载效果演示

turn.js

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

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

　　插件下载效果演示

jQuery HiddenPosition

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

 
         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 可以帮助你生成响应式设计中的字体的理想尺寸。使用示例：

 
         $( 
         '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 是一款非常帮的自定义路径滚动插件。使用示例：

 
         $.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 
         });