jQuery Image ProgressBars插件用法介绍

在本文中, 我们将学习如何使用jQuery实现图像ProgressBar功能。图像进度条插入。
注意：请下载jQuery图像进度条插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

【jQuery Image ProgressBars插件用法介绍】< link href ="https://www.lsbin.com/progressbar.css" rel =" stylesheet" type =" text / css" /> < script src ="https://www.lsbin.com/jquery-3.3.1.min.js"> < / script> < script src ="https://www.lsbin.com/jquery。 progressbar.js"> < / script>

范例：
以下示例演示了
图像进度条
使用jQuery插件
createProgress()
和
getRandomNumber()
职能。这些功能利用了插件的
SetPercentage()
完成百分比的设置方法。要获取随机数, JavaScript的
Math.ceil()
和
Math.floor()
被使用。
设置背景图像以及为进度条选择的图像。插件的选项
背景不透明度
也在代码的jQuery部分中设置。
html

< !DOCTYPE html> < html > < head > < title > jQuery Image Progress bars< / title > < style > html { font-family: "Helvetica Neue", Arial, sans-serif; background-color: #e6e6e6; } < / style > < link rel = "stylesheet" type = "text/css" href = "https://www.lsbin.com/progressbar.css" > < script type = "text/javascript" src = "https://www.lsbin.com/jquery-3.3.1.min.js" > < / script > < script type = "text/javascript" src = "https://www.lsbin.com/jquery.progressbar.js" > < / script > < / head > < body > < h2 > jQuery Image Progressbar< / h2 > < div id = "imageDivID" > < / div > < script type = "text/javascript" > $(document).ready(function () { var myimage = $("#imageDivID").progressBar({ imageUrl: 'images/gfg2.jpg', backgroundImageUrl: 'images/geeksimage.png', imageHeight: 280, imageWidth: 300, backgroundOpacity: 0.5 }); createProgress(myimage, 0); }); function createProgress( imageProgressBar, currentVal) { var increment = getRandomNumber(0, 3); var newVal = currentVal + increment; if (newVal > 100) newVal = 100; if (currentVal == 100) newVal = 0; imageProgressBar.SetPercentage(newVal); setTimeout(function () { createProgress(imageProgressBar, newVal); }, 100); }function getRandomNumber(minVal, maxVal) { min = Math.ceil(minVal); max = Math.floor(maxVal); return Math.floor(Math.random() * (max - min + 1)) + min; } < / script > < / body > < / html >

输出如下：