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

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

您可能感兴趣的相关文章

 

Zoomooz.js

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

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

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

  插件下载     效果演示

 

equalize.js

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

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

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

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

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

  插件下载     效果演示

 

Freetile.js

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

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

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

  插件下载     效果演示

 

gridster.js

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

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

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

  插件下载     效果演示

 

Stellar.js

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

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

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

  插件下载     效果演示

 

turn.js

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

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

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

  插件下载     效果演示

 

jQuery HiddenPosition

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

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

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

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

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

压轴的 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});  

  插件下载     效果演示

 

您可能感兴趣的相关文章

   

本文链接:2012年最有用50款 jQuery 插件:网页布局篇

编译来源:前端里 ◆ 关注前端开发技术 ◆ jizhula.com

本文出处【http://www.yyyweb.com/

赞 (0) 打赏