开发者社区> 秋天风景> 正文

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

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

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

您可能感兴趣的相关文章

 

Zoomooz.js

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

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

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

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

  插件下载     效果演示

 

Freetile.js

Freetile.js

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

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

  插件下载     效果演示

 

gridster.js

gridster.js

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

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

  插件下载     效果演示

 

Stellar.js

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

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

压轴的 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.cnblogs.com/lhb25/

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 网页局部打印总结
最近开发过程中遇到了js局部打印的功能,在网上找相关的资料,最终找到了juery.jqprint-0.3.js 和jquery.PrintArea.js两种。    最初使用的是jquery.jqprint-0.3.js,是在弹窗的情况下使用,即使出现滚动条也依然能够把所有内容成功打印出来。
1199 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23546 0
9个有用的jQuery日历和网页设计师的日期选择器插件
事件日历和日期选择器是是我们开发当中经常遇到的问题,这个时候我们就需要用jquery插件来实现,昨天我在做项目的时候,遇到了个问题就是如何显示倒计时问题,我这个时候就用jquery插件解决的,今天给大家分享9个其他的时间选择器插件 1。
1365 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14237 0
Smint – 用于单页网站制作的 jQuery 导航菜单插件
  Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮。Smint 使用非常简单,只有一个参数用于设置页面滚动的速度,默认是 500 毫秒,你可以设置为需要的任何值。
847 0
2012年最有用的50款 jQuery 插件集锦——《网页布局篇》
  2012年,众多的 jQuery 新插件发布出来,可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的,同时也是最有用的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。
1083 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16606 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13284 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
2393
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载