jQuery图片加载loading加载层动画插件

当前位置:主页 > jQuery库 > 图片效果 > jQuery图片加载loading加载层动画插件
jQuery图片加载loading加载层动画插件
分享:

    插件介绍

    ProgressBar.js是一款jQuery图片加载loading加载层动画插件。该插件在图片加载时,为图片添加垂直的图片逐渐显示效果,非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2019-09-04
    阅读:
简要教程

ProgressBar.js是一款jQuery图片加载loading加载层动画插件。该插件在图片加载时,为图片添加垂直的图片逐渐显示效果,非常炫酷。

ProgressBar.js效果图-1

ProgressBar.js效果图-2

使用方法

在HTML文件中引入。

<link rel="stylesheet" type="text/css" href="../src/progressbar.css">
<script type="text/javascript" src="../src/jquery.min.js"></script>     
<script type="text/javascript" src="../src/jquery.progressbar.js"></script>     
                
HTML结构
<div id="container">

</div>
                
javascript

普通垂直加载图片效果:

var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250
});
                

使用背景图片:

var myProgress = $("#example").progressBar({
    imageUrl: 'image.png',
    imageHeight: 300,
    imageWidth: 250,
    backgroundImageUrl: 'bg.png',
    backgroundOpacity: 1
});          
                

ProgressBar.js插件的github网址为:https://github.com/kelvinperrie/ProgressBar

下一篇:没有了