使用 jQuery 和 CSS3 的图像加载动画插件 - LoadGo

使用 jQuery 和 CSS3 的图像加载动画插件 - LoadGo

版本:

浏览量:1069

最后更新:2021-09-12

应用标签:MAC 软件gitJquery插件

推荐指数:

详细信息

LoadGo 是一个 jQuery/JavaScript 插件,它在您的图像上创建一个 CSS3 动画叠加层,使其透明并填充相对于百分比值的颜色。

非常适合创建令人惊叹的加载动画以使用您自己的图像(例如徽标)指示进度信息。

基本用法:

1. 在网页上包含最新版本的 jQuery 库和 jQuery loadGo 插件。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="loadgo.js"></script>

2. 将 PNG 图像添加到您的网页中。

<img id="demo" src="logo.png" alt="Demo">

3. 调用图像上的函数。

$('#demo').loadgo();

4.插件默认选项自定义加载动画。

//  Overlay color
bgcolor: '#FFFFFF',       
 
//  Overlay opacity   
opacity: '0.5',
 
//  Overlay smooth animation when setting progress              
animated: true,      
 
//  Overlay image
image: null,  
 
//  Overlay CSS class         
class: null,
 
// Resize functions
resize: null,
 
// Direction animation
// 'left to right', 'right to left', 'bottom to top' or 'top to bottom'       
direction: 'lr',
 
// Image filter (optional)
filter: null

5. API 方法。

// sets progress number to loading overlay.
$('#demo').loadgo('setprogress', 30);
 
// sets progress to zero automatically.
$('#demo').loadgo('resetprogress');
 
// returns current progress.
$('#demo').loadgo('getprogress');
 
// stops the loop and shows the full image.
$('#demo').loadgo('stop');
 
// sets overlay to loop indefinitely until stopped.
$('#logo').loadgo('loop', 10);
 
// gets options
$('#logo').loadgo('options');
 
// sets options
$('#logo').loadgo('options', {/* options here */});
 
// destroy the instance
$('#logo').loadgo('destroy');

变更日志:

v2.2.1 (2019-11-10)

  • 代码风格

  • Javascript:setProgress 方法现在检查元素是否存在。

  • 添加了 Gruntfile。

  • 修复了 Javascript 示例。

2015-11-02

  • 在某些 jQuery 较新版本上未定义 $ 的修复程序。

2015-09-30

  • 使用 CSS3 过滤器属性的过滤器选项

2015-08-06

  • 添加了用于设置动画方向的新选项“方向”。 

2015-07-12

  • 添加了调整大小功能。此外,还包含“resize”参数,以便用户可以使用自己的调整大小功能。Overlay 现在有一个名为“loadgo-overlay”的空 CSS 类。

2015-06-24

  • 添加了循环和停止方法。

 

联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。