jqFloat.js - 浮动效果与jQuery！

所属分类：其他-动画效果

53528 333 查看评论 (3)

分享到微信朋友圈

查看演示立即下载

插件描述：jqFloat.js是一个jQuery插件，能够让任何HTML对象“ 浮 “在您的网页。它有助于创建简单的浮动动画，让您的网站活动着这些小的“ 浮动 “对象。

jqFloat.js是一个jQuery插件，能够让任何HTML对象“ 浮 “在您的网页。它有助于创建简单的浮动动画，让您的网站活动着这些小的“ 浮动 “对象。浮动玩得开心?

你可以有几个“ 浮动 “的对象有不同的属性，在您的网页。请参阅下面的更多细节。

使用步骤

如何运作

qFloat.js使用jQuery.animate()方法无穷循环动画对象的不同位置，从而使物体漂浮在网页上出现。使用jQuery .data()方法来存储和跟踪每个对象的属性和状态。

如何使用

1。首先，你需要脚本文件的包括jQuery和jqFloat.js加入到<head>标签。

<SCRIPT SRC = “jquery.min.js” > </ SCRIPT>
<SCRIPT SRC = “jqfloat.js” > </ SCRIPT>

请使用jQuery 1.7.1或更高版本（低版本没有测试）。

2。接下来，你可以使你的HTML对象通过调用“floating” ，.jqFloat() function on jQuery object ：

$(document).ready(function() {
   $('object').jqFloat();
});

那么，尝试定义自己的浮动设置，而不是使用默认值。请参阅配置节的更多细节。

3。享受浮动?！

配置

.jqFloat( [Method] [, Options] )

Method: 用于控制浮动对象。

Options: 一个数组配置浮动动漫。

方法

目前只有两种方法可供选择：

方法名称描述

Play (or no method specified)启动浮动动漫。

Stop 开始登陆动画（停止飘动画）。

选项

有几个选项可以用来配置浮动动画。

名类型默认描述

width Int 100最大水平浮动。该值将被除以2，并追加到反对左右。

height Int 100最大垂直浮动区域。该值将被除以2，附加到对象的顶部和底部。

speed Int 1000最大的浮动速度（毫秒）。

minHeight Int 0从底部/水面漂浮物的距离。

实施例的配置

$(document).ready(function() {
   //如果没有指定的方法和选项
   //启动浮动默认设置动画
   $('object').jqFloat();
   //如果指定的唯一选择
   //启动指定的设置浮动动画
   $('object').jqFloat({
      width: 300,
      height: 300,
      speed: 100
   });
   //停止浮动动画
   $('object').jFloat('stop');
   //启动浮动动画
   $('object').jFloat('play');
});

请注意，'stop'的方法，将移动浮动对象回到它原来的位置。如果你想立即停止浮动效果，使用$('object').stop()来代替。

透镜状插件lenticular

图片显示效果切换插件Adipoli