简要教程
waterfloat是一款效果非常炫酷的可以实现元素漂浮在水面特效的jQuery插件。该jQuery插件可以将指定的元素设置为在水面上下沉浮摇摆的特效,就好像一块木头在海面上漂浮的效果。
查看演示 下载插件
使用方法
HTML结构
该元素漂浮特效的HTML结果非常简单,例子中使用的是一些按钮,你也可以使用其他的HTML元素来制作这个特效。
CSS样式
为按钮元素添加一些必要的CSS样式。
.btn{ background:teal; height:40px; width:100px; position:relative; border:0px; border-radius:5px; color:white; -webkit-transform: rotate(0deg); }
初始化插件
在DOM元素加载完毕之后,可以通过下面的我方法来初始化该插件。
$(document).ready(function(){ var b1 = $('#b1'); var b2 = $('#b2'); var b3 = $('#b3'); var b4 = $('#b4'); var b5 = $('#b5'); var b6 = $('#b6'); var b7 = $('#b7'); var p1 = new waterFloat(b1,900,3,8); var p2 = new waterFloat(b2,700,3,8); var p3 = new waterFloat(b3,800,3,10); var p4 = new waterFloat(b4,900,3,8); var p5 = new waterFloat(b5,700,3,8); var p6 = new waterFloat(b6,800,3,10); var p7 = new waterFloat(b7,700,3,8); });
该插件的初始化方法是首先通过jQuery选择器来获取要实现效果的jQuery对象。
$(document).ready(function(){ var b1 = $('#b1'); var b2 = $('#b2'); var b3 = $('#b3'); var b4 = $('#b4'); var b5 = $('#b5'); var b6 = $('#b6'); var b7 = $('#b7'); var p1 = new waterFloat(b1,900,3,8); var p2 = new waterFloat(b2,700,3,8); var p3 = new waterFloat(b3,800,3,10); var p4 = new waterFloat(b4,900,3,8); var p5 = new waterFloat(b5,700,3,8); var p6 = new waterFloat(b6,800,3,10); var p7 = new waterFloat(b7,700,3,8); });
然后可以创建一个新的waterFloat对象,并在其中插入以下以下参数:
var time = 900; //浮动周期时间,单位毫秒 var degrees = 1; //浮动的角度 var vertical_displacement = 10; //元素垂直浮动唯一的距离,单位像素 var waterfloat = new waterFloat(elem,time,degrees,vertical_displacement);
来源 jQuery之家