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

jQuery仿Youtube网站ajax加载进度条特效

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

简介

##### HTML结构
使用该进度条插件，首先要在页面中引入jquery和jquery.loadingbar.js以及loadingbar.css。

```html
<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>
```
我们需要添加的html元素是一个ajax链接和一个用于显示结果的容器。上面的代码中请将url换成你的AJAX链接。

##### JAVASCRIPT
通过下面的语句来调用该进度条插件。

```html
$(".ajax-call").loadingbar({
  target: "#loadingbar-frame",
  replaceURL: false,
  direction: "right",
  
  /* Default Ajax Parameters.  */
  async: true, 
  complete: function(xhr, text) {},
  cache: true,
  error: function(xhr, text, e) {},
  global: true,
  headers: {},
  statusCode: {},
  success: function(data, text, xhr) {},
  dataType: "html",
  done: function(data) {}
});
```
通过jQuery选择器来调用.loadingbar，这样该jQuery选择器选择的元素将成为loading进度条并通过ajax调用执行进度条动画。插件将使用href中的URL来作为AJAX的地址，并自动将结果放入.loadingbar-frame容器中。

下面介绍一些可用参数：

- Target ：你可以通过改变该参数来改变结果显示容器。
- replaceURL ：该参数会在链接呗点击时，改变浏览器的地址栏的URL地址。即显示当前URL的地址，默认值为false。
- animationTime ：该参数用于设置每次执行动画的时间。单位毫秒，默认值为1000。
- Direction ：该参数用于控制进度条的动画方向。默认值为"right"。
- 在“Default Ajax Parameters”下面的参数和jQuery ajax参数一致，你可以通过jQuery.ajax document查看它们。
##### 高级定制
有时候你可能希望使用不同的方式来发送AJAX请求，例如一个链接用GET请求，而另一个则用POST请求。你可以像下面的html代码一样来定制它们：

```html
<a href="..."
data-datatype="json" data-type="GET" data-target="#frame">Click Me</a>
```
你可以简单的通过添加data-datatype和data-type来定制你想要的AJAX方式。也可以通过data-target实现来指定结果返回容器。

##### 定制CSS样式
你可以是否容易的改变loading进度条的样式。要改变进度条的颜色，在loadingbar.css文件中修改下面代码：

```html
#loadingbar {
    background: YOUR COLOR;
}
  
#loadingbar dd, #loadingbar dt {
  -moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
  box-shadow: YOUR COLOR 1px 0 6px 1px;
}
```

web299.com

jQuery仿Youtube网站ajax加载进度条特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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