कैसे बनाएं: इमेज तुलना स्लाइडर
- पिछला पृष्ठ छवि विस्तारक
- अगला पृष्ठ वेबसाइट चिह्न
दो इमेजों की तुलना करने वाले स्लाइडर को कैसे बनाएं जाता है।
इमेज तुलना स्लाइडर
नीले स्लाइडर को बदलकर इमेजों की तुलना करें:

इमेज की तुलना स्लाइडर बनाएं
पहला कदम - HTML जोड़ें:
<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>
दूसरा कदम - CSS जोड़ें:
कंटेनर को 'सापेक्ष' स्थिति में होना चाहिए。
* {box-sizing: border-box;} .img-comp-container { position: relative; height: 200px; /* चित्र की ऊंचाई से समान होना चाहिए */ } .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; /* स्लाइडर के आकार को सेट करें: */ width: 40px; height: 40px; background-color: #2196F3; opacity: 0.7; border-radius: 50%; }
तीसरा कदम - JavaScript जोड़ें:
function initComparisons() { var x, i; /* "overlay" कोड के साथ वाले सभी एलेमेंट खोजें: */ x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { /* प्रत्येक "ओवरले" एलेमेंट पर एक बार चलाएं: compareImages फ़ंक्शन को चलाते समय "ओवरले" एलेमेंट को पैरामीट के रूप में पास करें: */ compareImages(x[i]); } function compareImages(img) { var slider, img, clicked = 0, w, h; /* img एलेमेंट के विस्तार और ऊंचाई को प्राप्त करें: */ w = img.offsetWidth; h = img.offsetHeight; /* img एलेमेंट का विस्तार 50% सेट करें: */ img.style.width = (w / 2) + "px"; /* स्लाइडर बनाएं: */ slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); /* स्लाइडर जोड़ें: */ img.parentElement.insertBefore(slider, img); /* स्लाइडर को मध्य में रखने के लिए: */ slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; /* माउस बटन दबाने पर चलने वाला फ़ंक्शन: */ slider.addEventListener("mousedown", slideReady); /* माउस बटन रिलीज करते समय चलने वाला एक और फ़ंक्शन: */ window.addEventListener("mouseup", slideFinish); /* या स्पर्श (स्पर्श स्क्रीन के लिए: ) */ slider.addEventListener("touchstart", slideReady); /* और रिलीज करें (स्पर्श स्क्रीन के लिए: ) */ window.addEventListener("touchend", slideFinish); function slideReady(e) { /* छवि पर जाने के दौरान संभावित किसी अन्य कार्य को रोकें: */ e.preventDefault(); /* स्लाइडर अब क्लिक हो चुका है और जाने वाला है: */ clicked = 1; /* स्लाइडर के स्थानांतरण के दौरान चलने वाली फ़ंक्शन: */ window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { /* स्लाइडर पर क्लिक नहीं हो रहा है: */ clicked = 0; } function slideMove(e) { var pos; /* यदि स्लाइडर पर क्लिक नहीं हो रहा है, तो इस फ़ंक्शन से बाहर निकलें: */ if (clicked == 0) return false; /* कुंजीपट के x स्थान को प्राप्त करें: */ pos = getCursorPos(e) /* स्लाइडर को छवि के बाहर न रहने दें: */ if (pos < 0) pos = 0; if (pos > w) pos = w; /* कुंजीपट के स्थान के अनुसार आवरण छवि के आकार को समायोजित करने वाली फ़ंक्शन चलाएँ: */ slide(pos); } function getCursorPos(e) { var a, x = 0; e = (e.changedTouches) ? e.changedTouches[0] : e; /* छवि के x स्थान को प्राप्त करें: */ a = img.getBoundingClientRect(); /* कुंजीपट के स्थान को छवि के बारे में गणना करें: */ x = e.pageX - a.left; /* किसी भी पृष्ठ रोलिंग को ध्यान में रखें: */ x = x - window.pageXOffset; return x; } function slide(x) { /* छवि के आकार को समायोजित करें: */ img.style.width = x + "px"; /* स्लाइडर का स्थान निर्धारित करें: */ slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } }
चौथा कदम - स्क्रिप्ट चलाएँ:
<script> initComparisons(); </script>
- पिछला पृष्ठ छवि विस्तारक
- अगला पृष्ठ वेबसाइट चिह्न