jQuery Image ProgressBars插件用法介绍

2021年3月13日17:01:11 发表评论 867 次浏览

在本文中, 我们将学习如何使用jQuery实现图像ProgressBar功能。图像进度条插入。

注意：请下载jQuery图像进度条插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。

<link href =" progressbar.css" rel =" stylesheet" type =" text / css" /> <script src =" jquery-3.3.1.min.js"> </ script> <script src =" 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 = "progressbar.css" >
     < script type = "text/javascript" 
         src = "jquery-3.3.1.min.js" >
     </ script >
     < script type = "text/javascript" 
         src = "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 >

输出如下：

html

发表评论取消回复

登录 注册 找回密码

登录注册找回密码