Deslizador de comparación de imagen suave en JavaScript puro-ImageComparison
| Autor: | M-Ulyanov |
|---|---|
| Views Total: | 2,970 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 9, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otro plugin de comparación de imágenes de JavaScript que permite a un control deslizante personalizado para comparar dos imagenes superpuestas.
Install it via NPM:
$ npm install image-comparison
Funcionamiento
Cargue los archivos JavaScript y CSS de ImageComparison en la página HTML.
<link rel="stylesheet" href="src/ImageComparison.css"> <script src="src/ImageComparison.js"></script>
Inserte las imágenes después/antes que desee comparar en un elemento contenedor.
<div class="js-comparison-container"> <img class="comparison-image" src="before.jpg" alt=""> <img class="comparison-image" src="after.jpg" alt=""> </div>
Inicialice el control deslizante de comparación de imágenes:
new ImageComparison({
container: containerSelector,
data: [
{
image: images[0],
label: 'before'
},
{
image: images[1],
label: 'after'
}
],
}); Establezca la posición inicial del control deslizante de comparación.
new ImageComparison({
container: containerSelector,
startPosition: 50,
data: [
{
image: images[0],
label: 'before'
},
{
image: images[1],
label: 'after'
}
],
});
