当前位置：首页 > 网页特效 > 动画效果

实现元素漂浮在水面特效的jQuery插件

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该元素漂浮特效的HTML结果非常简单，例子中使用的是一些按钮，你也可以使用其他的HTML元素来制作这个特效。

```html
<button class="btn" id="b1"  >Home</button>
<button id="b2" class="btn"  >About</button>
<button id="b3" class="btn"  >Product</button>
<button id="b4" class="btn"  >Demo</button>
<button id="b5" class="btn"  >Testimo</button>
<button id="b6" class="btn"  >Contact Us</button>
<button id="b7" class="btn"  >Carrers</button>      
```      
#####  CSS样式
为按钮元素添加一些必要的CSS样式。

```html
.btn{
    background:teal;
    height:40px;
    width:100px;
    position:relative;
    border:0px;
    border-radius:5px;
    color:white;
    -webkit-transform: rotate(0deg);
}        
```        
#####  初始化插件
在DOM元素加载完毕之后，可以通过下面的我方法来初始化该插件。

```html
$(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对象。

```html
var elem = $('#btn1');         
```        
然后可以创建一个新的waterFloat对象，并在其中插入以下以下参数：

```html
var time = 900; //浮动周期时间，单位毫秒
var degrees = 1; //浮动的角度
var vertical_displacement = 10; //元素垂直浮动唯一的距离，单位像素
var waterfloat = new waterFloat(elem,time,degrees,vertical_displacement);  
```

web299.com

实现元素漂浮在水面特效的jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果