En este artículo, aprenderemos cómo implementar la función ProgressBar de imagen usando el complemento jQuery Image ProgressBar .
Nota: descargue el complemento jQuery Image ProgressBar en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<link href=”progressbar.css” rel=”stylesheet” type=”text/css”/>
<script src=”jquery-3.3.1.min.js”></script>
<script src=”jquery. barra de progreso.js”></script>
Ejemplo: El siguiente ejemplo demuestra la funcionalidad básica del complemento Image ProgressBar utilizando las funciones jQuery createProgress() y getRandomNumber() . Estas funciones hacen uso del método SetPercentage() del complemento para establecer el porcentaje completo. Para obtener números aleatorios, se utilizan Math.ceil() y Math.floor() de JavaScript .
Se configura la imagen de fondo junto con la imagen seleccionada para la barra de progreso. La opción backgroundOpacity del complemento también se establece en la parte jQuery del código.
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA