Hoe te maken: Beeldvergelijkingsglijbaan

Leer hoe je een vergelijkingsglijbaan voor twee afbeeldingen maakt.

Maak een beeldvergelijkingsglijbaan

Eerste stap - Voeg HTML toe:

<div class="img-comp-container">
  <div class="img-comp-img">
    <img src="img_snow.jpg" breedte="300" hoogte="200">
  </div>
  <div class="img-comp-img img-comp-overlay">
    <img src="img_forest.jpg" breedte="300" hoogte="200">
  </div>
</div>

Tweede stap - Voeg CSS toe:

De container moet een 'relatieve' positie hebben.

* {box-sizing: border-box;}
.img-comp-container {
  positie: relatief;
  hoogte: 200px; /* Moet dezelfde hoogte hebben als het beeld */
}
.img-comp-img {
  positie: absoluut;
  breedte: auto;
  hoogte: auto;
  overflow: verborgen;
}
.img-comp-img img {
  display: blok;
  vertical-align: middle;
}
.img-comp-slider {
  positie: absoluut;
  z-index: 9;
  cursor: ew-resize;
  /* Stel het uiterlijk van de schuifknop in: */
  breedte: 40px;
  hoogte: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}

Derde stap - Voeg JavaScript toe:

function initComparisons() {
  var x, i;
  /* Zoek naar alle elementen met de klasse "overlay": */
  x = document.getElementsByClassName("img-comp-overlay");
  for (i = 0; i < x.length; i++) {
    /* 
	Voer voor elke "cover"-element een keer uit:
    Pass de "cover"-elementen als parameter door aan de functie compareImages wanneer deze wordt uitgevoerd:
	*/
    compareImages(x[i]);
  }
  function compareImages(img) {
    var slider, img, clicked = 0, w, h;
    /* Haal de breedte en hoogte van het img-element op: */
    w = img.offsetWidth;
    h = img.offsetHeight;
    /* Stel de breedte van het img-element in op 50%: */
    img.style.width = (w / 2) + "px";
    /* Maak de schuifregelaar aan: */
    slider = document.createElement("DIV");
    slider.setAttribute("class", "img-comp-slider");
    /* Voeg de schuifregelaar toe: */
    img.parentElement.insertBefore(slider, img);
    /* Plaats de schuifregelaar in het midden: */
    slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
    slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
    /* Een functie die wordt uitgevoerd wanneer de muisknop wordt ingedrukt: */
    slider.addEventListener("mousedown", slideReady);
    /* Een andere functie die wordt uitgevoerd wanneer de muisknop wordt losgelaten: */
    window.addEventListener("mouseup", slideFinish);
    /* Of raak aan (voor touchscreens:) */
    slider.addEventListener("touchstart", slideReady);
     /* Enkelvoudig vrijlaten (voor touchscreens:) */
    window.addEventListener("touchend", slideFinish);
    function slideReady(e) {
      /* Voorkom andere mogelijke acties die kunnen optreden tijdens het verplaatsen van de afbeelding: */
      e.preventDefault();
      /* De schuifbalk is nu geklikt en klaar voor verplaatsing: */
      clicked = 1;
      /* Functie die wordt uitgevoerd wanneer de schuifbalk wordt verplaatst: */
      window.addEventListener("mousemove", slideMove);
      window.addEventListener("touchmove", slideMove);
    }
    function slideFinish() {
      /* Stop met klikken op de schuifbalk: */
      clicked = 0;
    }
    function slideMove(e) {
      var pos;
      /* Verlaat deze functie als je niet langer op de schuifbalk klikt: */
      if (clicked == 0) return false;
      /* Haal de x-positie van de muispijl op: */
      pos = getCursorPos(e)
      /* Voorkom dat de schuifbalk buiten de afbeelding ligt: */
      if (pos < 0) pos = 0;
      if (pos > w) pos = w;
      /* Voer een functie uit die de grootte van het afbeeldingsdekking aanpast op basis van de muispijl: */
      slide(pos);
    }
    function getCursorPos(e) {
      var a, x = 0;
      e = (e.changedTouches) ? e.changedTouches[0] : e;
      /* Haal de x-positie van de afbeelding op: */
      a = img.getBoundingClientRect();
      /* Bereken de x-coördinaat van de muispijl ten opzichte van de afbeelding: */
      x = e.pageX - a.left;
      /* Rekening houden met eventuele pagina scrollen: */
      x = x - window.pageXOffset;
      return x;
    }
    function slide(x) {
      /* Pas afbeeldingsgrootte aan: */
      img.style.width = x + "px";
      /* Lokaliseer schuifbalk: */
      slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
    }
  }
}

Vierde stap - Voer script uit:

<script>
initComparisons();
</script>

Try it yourself