最常用的10款jquery网页布局插件-极品分享

最常用的10款jquery网页布局插件

本文是《最常用的10款jquery网页布局插件》系列的第一篇，整个文章系列还会为大家分享一下分类的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 能够帮助你把组织内容在一个高效，动态和响应的布局中。使用示例：

$('#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});

插件下载效果演示

极品分享

评论回复