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

版本:

浏览量:1029

最后更新：2021-09-12

应用标签：git Jquery插件 MAC 软件

推荐指数:

查看演示点击下载

详细信息

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');