当前位置：首页 > 网页特效 > 进度条

jQuery和CSS3超酷loading加载动画特效

分类：进度条日期：2024-05-14 点击(1) 评论(0)

简介

使用该loading加载插件首先要引入jQuery和waitMe.js和waitMe.css文件。

```html
<link rel="stylesheet" href="css/waitMe.css">
<script src='js/jquery.js'></script>                
<script src='js/waitMe.js'></script> 
```                 
#####  初始化loading插件
在你需要使用loading效果的容器上调用下面的方法来初始化该插件。

```html
$(container).waitMe({param1 : value1, param2 : value2, ...});             
```
例如使用一个按钮来触发loading效果。

```html
<button type="button" id="demo">Submit</button>                
```
像下面这样来调用插件。

```html
<script>
  $(function(){
    // none, bounce, rotateplane, stretch, orbit, 
    // roundBounce, win8, win8_linear or ios
    var current_effect = 'bounce'; // 
 
    $('#demo').click(function(){
      run_waitMe(current_effect);
    });
 
    function run_waitMe(effect){
      $('#SELECTOR').waitMe({
 
      //none, rotateplane, stretch, orbit, roundBounce, win8, 
      //win8_linear, ios, facebook, rotation, timer, pulse, 
      //progressBar, bouncePulse or img
      effect: 'bounce',
 
      //place text under the effect (string).
      text: '',
 
      //background for container (string).
      bg: 'rgba(255,255,255,0.7)',
 
      //color for background animation and text (string).
      color: '#000',
 
      //change width for elem animation (string).
      sizeW: '',
 
      //change height for elem animation (string).
      sizeH: '',
 
      // url to image
      source: ''
 
      });
    }
     
  });
</script>   
```             
####  配置参数

------------

下面是该loading加载动画插件的配置参数：

- effect ：动画效果（String）。可用值有：'bounce'(默认值), none, rotateplane, stretch, orbit, roundBounce, win8, win8_linear, ios, facebook, rotation, timer, pulse, progressBar, bouncePulse, img
- text ：loading效果下面的显示文本（String）。
- bg ：容器的背景颜色（String）。如：'rgba(255,255,255,0.7)'。可以使用颜色和图片。
- color ：loading和文本的颜色（String）。
- sizeW ：改变loading动画元素的宽度（String）。例如：40px，默认为空字符串。
- sizeH ：改变loading动画元素的高度（String）。例如：40px，默认为空字符串。
- source ：图片的URL（String）。默认为空字符串。该属性和effect: 'img'一起使用。
####  方法

------------

要关闭loading加载动画，可以使用：

```html
$(container).waitMe("hide");                
```
hide为关闭和隐藏Loading动画。

#####  注意事项
对于sizeW和sizeH属性，各种效果默认的尺寸如下：

- bounce ：sizeW: '20px', sizeH: '20px'
- rotateplane ：sizeW: '30px', sizeH: '30px'
- stretch ：sizeW: '8px', sizeH: '60px'
- orbit ：sizeW: '40px', sizeH: '40px'
- roundBounce ：sizeW: '60px', sizeH: '60px'
- win8 ：sizeW: '40px', sizeH: '40px'
- win8_linear ：sizeW: '150px', sizeH: '6px'
- ios ：sizeW: '40px', sizeH: '40px'
- facebook ：sizeW: '6px', sizeH: '25px'
- rotation ：sizeW: '60px', sizeH: '60px'
- timer ：sizeW: '40px', sizeH: '40px'
- pulse ：sizeW: '30px', sizeH: '30px'
- progressbar ：sizeW: '200px', sizeH: '20px'
- bouncePulse ：sizeW: '20px', sizeH: '20px'
注意不要使用非块级元素来作为容器，例如table、input和textarea等元素。可以使用div、span和body等元素（使用html元素和使用body元素效果是一样的）。

####  在页面初始化时调用loading效果

------------

可以使用下面的HTML结构来在页面加载时调用该Loading加载动画插件。

```html
<body class="waitMe_body">
  <div class="waitMe_container progress" style="background:#fff">
    <div style="background:#000"></div>
  </div>
</body>                
<body class="waitMe_body">
  <div class="waitMe_container working" style="background:#fff">
    <div style="background:#000"></div>
  </div>
</body>                
<body class="waitMe_body">
  <div class="waitMe_container img" style="background:#fff">
    <div style="background:url('img.png')"></div>
  </div>
</body>                
<body class="waitMe_body">
  <div class="waitMe_container text" style="background:#fff">
    <div style="color:#000">Loading</div>
  </div>
</body>              
```

web299.com

jQuery和CSS3超酷loading加载动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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