Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| * {box-sizing: border-box;} | |
| .img-comp-container { | |
| position: relative; | |
| height: 200px; /*should be the same height as the images*/ | |
| } | |
| .img-comp-img { | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| overflow:hidden; | |
| } | |
| .img-comp-img img { | |
| display:block; | |
| vertical-align:middle; | |
| } | |
| .img-comp-slider { | |
| position: absolute; | |
| z-index:9; | |
| cursor: ew-resize; | |
| /*set the appearance of the slider:*/ | |
| width: 40px; | |
| height: 40px; | |
| background-color: #2196F3; | |
| opacity: 0.7; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| <script> | |
| function initComparisons() { | |
| var x, i; | |
| /*find all elements with an "overlay" class:*/ | |
| x = document.getElementsByClassName("img-comp-overlay"); | |
| for (i = 0; i < x.length; i++) { | |
| /*once for each "overlay" element: | |
| pass the "overlay" element as a parameter when executing the compareImages function:*/ | |
| compareImages(x[i]); | |
| } | |
| function compareImages(img) { | |
| var slider, img, clicked = 0, w, h; | |
| /*get the width and height of the img element*/ | |
| w = img.offsetWidth; | |
| h = img.offsetHeight; | |
| /*set the width of the img element to 50%:*/ | |
| img.style.width = (w / 2) + "px"; | |
| /*create slider:*/ | |
| slider = document.createElement("DIV"); | |
| slider.setAttribute("class", "img-comp-slider"); | |
| /*insert slider*/ | |
| img.parentElement.insertBefore(slider, img); | |
| /*position the slider in the middle:*/ | |
| slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; | |
| slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; | |
| /*execute a function when the mouse button is pressed:*/ | |
| slider.addEventListener("mousedown", slideReady); | |
| /*and another function when the mouse button is released:*/ | |
| window.addEventListener("mouseup", slideFinish); | |
| /*or touched (for touch screens:*/ | |
| slider.addEventListener("touchstart", slideReady); | |
| /*and released (for touch screens:*/ | |
| window.addEventListener("touchend", slideFinish); | |
| function slideReady(e) { | |
| /*prevent any other actions that may occur when moving over the image:*/ | |
| e.preventDefault(); | |
| /*the slider is now clicked and ready to move:*/ | |
| clicked = 1; | |
| /*execute a function when the slider is moved:*/ | |
| window.addEventListener("mousemove", slideMove); | |
| window.addEventListener("touchmove", slideMove); | |
| } | |
| function slideFinish() { | |
| /*the slider is no longer clicked:*/ | |
| clicked = 0; | |
| } | |
| function slideMove(e) { | |
| var pos; | |
| /*if the slider is no longer clicked, exit this function:*/ | |
| if (clicked == 0) return false; | |
| /*get the cursor's x position:*/ | |
| pos = getCursorPos(e) | |
| /*prevent the slider from being positioned outside the image:*/ | |
| if (pos < 0) pos = 0; | |
| if (pos > w) pos = w; | |
| /*execute a function that will resize the overlay image according to the cursor:*/ | |
| slide(pos); | |
| } | |
| function getCursorPos(e) { | |
| var a, x = 0; | |
| e = (e.changedTouches) ? e.changedTouches[0] : e; | |
| /*get the x positions of the image:*/ | |
| a = img.getBoundingClientRect(); | |
| /*calculate the cursor's x coordinate, relative to the image:*/ | |
| x = e.pageX - a.left; | |
| /*consider any page scrolling:*/ | |
| x = x - window.pageXOffset; | |
| return x; | |
| } | |
| function slide(x) { | |
| /*resize the image:*/ | |
| img.style.width = x + "px"; | |
| /*position the slider:*/ | |
| slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Compare Two Images</h1> | |
| <p>Click and slide the blue slider to compare two images:</p> | |
| <div class="img-comp-container"> | |
| <div class="img-comp-img"> | |
| <img src="img_snow.jpg" width="300" height="200"> | |
| </div> | |
| <div class="img-comp-img img-comp-overlay"> | |
| <img src="img_forest.jpg" width="300" height="200"> | |
| </div> | |
| </div> | |
| <script> | |
| /*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/ | |
| initComparisons(); | |
| </script> | |
| </body> | |
| </html> | |