div显示图片_基于jQuery，图片加载loading加载层动画开源库

简要说明

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

代码教程

页面中引入

<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结构

<table style="margin: 20px auto;"><tr><td><div id="divDuck1">div>td><td>Example 1.<br /><p>A single image, when used on the background it has opacity applied to be only partially visible.p><pre>var duckbar1 = $("#divDuck1").progressBar({    imageUrl: 'images/duck.png',    imageHeight: 290,    imageWidth: 254});// to update percentage value to 15%duckbar1.SetPercentage(15);                pre>td>tr><tr><td style="background-color: #2b2b2b"><div id="divDuck2">div>td><td>Example 2.<br /><p>Same as above, but dark background.p><pre>var duckbar2 = $("#divDuck2").progressBar({    imageUrl: 'images/duck.png',    imageHeight: 290,    imageWidth: 254});                pre>td>tr><tr><td><div id="divDuck3">div>td><td>Example 3.<br /><p>Having no background image (or making it totally transparent)p><pre>var duckbar3 = $("#divDuck3").progressBar({    imageUrl: 'images/duck.png',    imageHeight: 290,    imageWidth: 254,    backgroundOpacity: 0});                pre>td>tr><tr><td><div id="divBucket">div>td><td>Example 4.<br /><p>Two different images; a 'full' and an 'empty', the background (or empty) image having no transparencyp><pre>var bucketbar = $("#divBucket").progressBar({    imageUrl: 'images/BucketFull.png',    backgroundImageUrl: 'images/BucketEmpty.png',    imageHeight: 146,    imageWidth: 176,    backgroundOpacity: 1});                pre>td>tr><tr><td><div id="divPie">div>td><td>Example 5.<br /><p>NZ loves pies. I also love pies.p><pre>var piesBar = $("#divPie").progressBar({    imageUrl: 'images/nz-pies.png',    backgroundImageUrl: 'images/nz-empty.png',    imageHeight: 342,    imageWidth: 233,    backgroundOpacity: 1});                pre>td>tr>table><div class="related">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});

作者 | 大神神码 | 蚂蚁开源大神，资深前端工程师

觉得文章不错，点下在看

点击阅读原文，下载/演示DEMO源码

↓↓↓↓