这是一款jQuery重力感应特效插件jGravity。该jQuery重力感应插件可以为页面中的所有元素制作受重力下落效果,并且元素可以进行拖拽,效果非常炫酷。
使用方法
在页面中引入jquery和jGravity.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jGravity.js"></script>
初始化插件
在页面DOM元素加载完毕之后,通过jGravity()
方法来初始化该jQuery红利感应插件。
$(document).ready(function() { $('body').jGravity(); });
也可以在初始化是传入配置参数。
$(document).ready(function() { $('div.jGravity').live('click', function() { $('body').jGravity({ target: 'everything', ignoreClass: 'ignoreMe', weight: 25, depth: 5, drag: true }); }); });
配置参数
jGravity.js重力感应插件的可用配置参数有:
target
:页面中重力感应的目标元素,可以是 'div, p, span', 'h2', 'div#specificDiv'等选择器元素,或者填入everything
表示页面的所有元素。ignoreClass
:被忽略的元素,即不想要重力感应的元素。weight
:重力感应的强度,需要大于1的值,默认为25.也可以使用关键字:'heavy'
或'light'
。depth
:代表某个元素会影响它旁边的多少个元素。需要大于1的值,默认值为1。drag
:受重力感应的元素是否可以被拖拽。
jGravity.js重力感应插件的github地址为:http://tinybigideas.com/plugins/jquery-gravity/