您的位置：首页 > Web前端 > JQuery

jQuery Gridly — 非常好用的jQuery拖拽拖放插件

2013-12-13 00:00 453 查看

jQuery Gridly 是个网格式的拖放移位 jQuery 插件，这个插件交互不错，在拖动的时候会显示一些移动动画，效果很好看。此插件还有其它特色功能，比如关闭、点击放大、增加模块等等。

使用方法：

下载插件包：jQuery Gridly（zip)
jQuery Gridly(tar)
插件使用

在 html 的<head></head> 中加入如下代码即可使用：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>

<script src="javascript/jquery.gridly.js" type="text/javascript"></script>

<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

Demo
<style type="text/css">

.gridly {

position: relative;

width: 960px;

}

.brick.small {

width: 140px;

height: 140px;

}

.brick.large {

width: 300px;

height: 300px;

}

</style>

<div class="gridly">

<div class="brick small"></div>

<div class="brick small"></div>

<div class="brick large"></div>

<div class="brick small"></div>

<div class="brick small"></div>

<div class="brick large"></div>

</div>

<script>

$('.gridly').gridly({

base: 60, // px

gutter: 20, // px

columns: 12

});

</script>

在线演示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航