jQuery重力效果插件jGravity

jGravity是一款jQuery重力效果插件，可以模拟物理运动使元素在网页中自由移动，并在各种条件下产生相应的效果。我们来看看具体如何使用。

首先我们需要引入相关的JS和CSS文件，代码如下：

接下来，将需要移动的元素添加到页面中，并通过CSS样式进行定位和设置，如下图：

动起来
。盒子{
位置：绝对；
顶部：50 像素；
左：50 像素；
宽度：100px；
高度：100px；
背景颜色：#333；
颜色：#fff；
文本对齐：居中；
行高：100px；
字体大小：24px；
}

然后，当文档准备好后，调用jGravity插件，设置相关参数如下：

$(文档).ready(function(){
$('.box').jGravity({
目标：'身体'，
重量：5，
深度：10，
拖动：真
});
});

上面代码中，target参数指定了重力范围，这里设置为整个身体； weight参数指定元素移动时受到的重力，默认值为50，这里设置为5；深度参数指定元素在移动过程中将被拉动到的深度值，默认为1； Drag 参数指定是否允许拖动元素。

最后我们可以看到元素在页面上自由移动的效果了。

最近发表

猜你喜欢

相关文章