在设计当中，我们最关注的是，现在经常看到有些网站使用浮动的小鸟作为元素来回飞，往往第一眼给你的感觉这个是用flash实现的，如果你没有很高的水平，基本上你是做不出这样的效果来的，那有没有一种好的方法来实现呢，今天就分享一下比较时尚的浮动元素是如何实现的，点击气球，他会跳，点击蜗牛，他不让你动，哈哈,
另外有人问我，我网站的加载进度是如何实现的，我分享了一下，看这篇文章
进一步阅读
这 是一个 插件，能够作出任何 HTML 对象显示在您的 web 页上"浮动"。它可以帮助创建简单的浮动动画并使您的网站活过来用这些小"浮动"的对象。
~废话少说，先看演示,（火狐和谷歌浏览器浏览最佳）我们的老规矩：喜欢源码的请留下你的邮箱和观点，
在网页中设置几个不同的浮动对象，
工作原理
jqFloat.js 使用 jQuery.animate() 方法无限循环进行动画处理的对象到不同的位置，因此它使对象出现在 web 页上浮动。它使用 jQuery.data() 方法来存储和跟踪每个对象的属性和状态。
jqFloat.js 运行在所有的浏览器上: IE6 and , Firefox and Webkit browsers.
使用方法
1. 在头部引用jquery文件，
2. 在任何需要浮动的元素上调用jqfloat()函数
View Code $(document).ready(function() { $('object').jqFloat();});
在看看超棒的效果
点击气球，他会跳，点击蜗牛，他不让你动，哈哈
函数配置:
.jqFloat( [Method] [, Options] )
Method: 用于控制浮动对象。
Options: 配置浮动动画的数组。关于Method
目前只有两个方法可用：:
Play (or no method specified)
开始浮动的动画Stop
开始登陆的动画.Options
有几个选项可以用于配置浮动动画
width
Type: Int Default: 100 --int类型 默认是100水平方向的最大浮动距离. 将数值除以2所得的结果定位在左边和右边.height
Type: Int Default: 100int--类型 默认是100垂直方向的最大浮动. 将数值除以2所得的结果定位在上面和下面.speed
Type: Int Default: 1000---int类型 默认是1000最大浮动速度.minHeight
Type: Int Default: 0浮动对象从底部/表面的距离
具体代码
1 $(document).ready(function() { 2 //如果没有指定方法和选项 3 //浮动元素使用默认的方法 4 $('object').jqFloat(); 5 6 //如果仅仅指定选项 7 //浮动元素按照指定的大小浮动 8 $('object').jqFloat({ 9 width: 300,10 height: 300,11 speed: 10012 });13 14 //停止浮动15 $('object').jFloat('stop');16 17 //开始浮动18 $('object').jFloat('play');19 });
本文链接：
hide