jQuery 图像进度条插件

在本文中，我们将学习如何使用 jQuery Image ProgressBar插件实现图像 ProgressBar 功能。

注意：请在工作文件夹中下载 jQuery Image ProgressBar 插件，并在 HTML 代码的 head 部分包含所需的文件。

示例：以下示例使用 jQuery createProgress()和getRandomNumber()函数演示了 Image ProgressBar插件的基本功能。这些函数使用插件的SetPercentage()方法来设置完成百分比。为了获得随机数，使用了 JavaScript 的Math.ceil()和Math.floor() 。
设置背景图像以及为进度条选择的图像。插件的选项backgroundOpacity也在代码的 jQuery 部分中设置。

html

  

    jQuery Image Progress bars
    
        html {
            font-family: "Helvetica Neue", 
                    Arial, sans-serif;
  
            background-color: #e6e6e6;
        }
    
  
    
    
    
    
    

  

    jQuery Image Progressbar
    
    
  
    
        $(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;
        }
    

  

输出：