在这个项目中，我们将创建一个图像滑块，我们可以用它检查 2 个图像。如果我们制作它们的精确副本。我们可以在垂直和水平方向上比较第一幅图像的每个边界与第二幅图像。
方法：
- 创建一个 HTML 文件，我们将在其中添加主div ，进一步我们在其中添加两个div以在其中添加图像。
- 创建一个 CSS 文件以在相应的div 中添加图像。
- 创建一个用于改变方向的 JavaScript 文件并比较 2 个图像。
HTML代码：
- 首先，创建一个 HTML 文件 (index.html)。
- 现在在创建我们的 HTML 文件之后，我们将使用
标签为我们的网页提供一个标题。它应该放在 <head> 标签之间。</li> <li>然后我们将提供所有背景图像的 CSS 文件链接到我们的 HTML。这也位于 <head> 标记之间。</li> <li>来到我们 HTML 代码的正文部分。 <ul> <li>首先，创建一个主div作为主框。</li> <li>在该<i>div 中，再</i>添加 2 个<i>div</i>以添加图像 1 和图像 2。</li> <li>在我们正文的末尾添加 <script> 标签，它将 JavaScript 文件与我们的 HTML 文件链接起来。</li> </ul> </li> </ul> <div class="noIdeBtnDiv"> <div> <h5 class="code">index.html</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-js" data-lang="JavaScript"><code class="replace"><!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1> PRESS:'v' for vertical movement & 'h' \ for horizontal movement </h1> <div class="main_box"> <div class="img1"></div> <div class="img2"></div> </div> <script src="index.js"></script> </body> </html></code></pre> </div> <p></p> <hr/> <h5 class="code">style.css</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-perl" data-lang="Perl"><code class="replace">/* restoring all of the browser effects */ *{ margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } /* same effects to the body */ body{ background-color: #000; color: #fff; } /* positioning of heading */ h1{ display: flex; justify-content: center; } /* positions of main div and 2 images */ .main_box,.img1,.img2{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .main_box{ margin-top: 2em; margin-bottom: 2em; } .img1{ background-image: url(image-url); background-size: cover; background-position: center; background-repeat: no-repeat; } .img2{ background-image: URL(image-url); background-size: cover; background-position: center; background-repeat: no-repeat; left: 50%; background-attachment: fixed; border-top: solid red 5px; border-left: solid red 5px; }</code></pre> </div> <p></p> <hr/> <h5 class="code">index.js</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="replace">// calling all of the Html classes const img2 = document.querySelector('.img2') // horizontal movement window.addEventListener('keydown',(e)=>{ if(e.key == 'h'){ window.addEventListener('mousemove',(e)=>{ img2.style.left = e.clientX +'px' img2.style.top = 0 +'px' }) } }) // vertical movement window.addEventListener('keydown',(e)=>{ if(e.key == 'v'){ window.addEventListener('mousemove',(e)=>{ img2.style.left = 0 +'px' img2.style.top = e.clientY +'px' }) } }) // default movement of slider which is horizontal movement window.addEventListener('mousemove',(e)=>{ img2.style.left = e.clientX + 'px' img2.scroll.top = 0 + 'px' })</code></pre> </div> <p></p> <hr/> </div> </div> <p> <strong>CSS 代码：</strong>以下是上述代码中使用的“style.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对所有用户都是交互的。考虑以下几点。</p> <p></p> <div class="_ap_apex_ad" id="d6f45c53-ff16-4cc5-8b91-eb6ee7037116" style="min-height:280px"></div> <p></p> <ul> <li>恢复所有浏览器效果。</li> <li>使用类和 id 为 HTML 元素赋予效果。</li> </ul> <div class="noIdeBtnDiv"> <div class="responsive-tabs"> <h2 class="tabtitle">样式文件</h2> <div class="tabcontent"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">/* restoring all of the browser effects */ *{ margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } /* same effects to the body */ body{ background-color: #000; color: #fff; } /* positioning of heading */ h1{ display: flex; justify-content: center; } /* positions of main div and 2 images */ .main_box,.img1,.img2{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .main_box{ margin-top: 2em; margin-bottom: 2em; } .img1{ background-image: url(image-url); background-size: cover; background-position: center; background-repeat: no-repeat; } .img2{ background-image: URL(image-url); background-size: cover; background-position: center; background-repeat: no-repeat; left: 50%; background-attachment: fixed; border-top: solid red 5px; border-left: solid red 5px; } </code></pre> </div> </div> </div> </div> <p> <strong>JavaScript 代码：</strong>在下面，我们编写代码</p> <ul> <li>检测鼠标移动以移动图像。</li> <li>在事件侦听器中使用不同的键盘键进行垂直和水平移动。 </li> </ul> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">document.querySelector('css_selector') => returns the first element that matches with specified CSS selector.</code></pre> </div> <p><strong>垂直和水平移动指南</strong></p> <ul> <li>滑块的默认水平移动。</li> <li><strong>当用户按下 (v)</strong>键一次时，垂直移动处于活动状态。</li> <li><strong>当用户按下 (h)</strong>键一次时，水平移动将再次激活。</li> </ul> <p><strong>注意：</strong> v 和 h 仅在小情况下有效。</p> <p>以下是上述 HTML 代码中使用的“index.js”文件的内容。</p> <div class="noIdeBtnDiv"> <div class="responsive-tabs"> <h2 class="tabtitle">索引.js </h2> <div class="tabcontent"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">// calling all of the Html classes const img2 = document.querySelector('.img2') // horizontal movement window.addEventListener('keydown',(e)=>{ if(e.key == 'h'){ window.addEventListener('mousemove',(e)=>{ img2.style.left = e.clientX +'px' img2.style.top = 0 +'px' }) } }) // vertical movement window.addEventListener('keydown',(e)=>{ if(e.key == 'v'){ window.addEventListener('mousemove',(e)=>{ img2.style.left = 0 +'px' img2.style.top = e.clientY +'px' }) } }) // default movement of slider which is horizontal movement window.addEventListener('mousemove',(e)=>{ img2.style.left = e.clientX + 'px' img2.scroll.top = 0 + 'px' }) </code></pre> </div> </div> </div> </div> <p><strong>输出：</strong>通过这种方式，您可以将 2 张图像放在一起进行比较。 </p> <p><img class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_compare_two_images_using_Image_comparison_slider?_0.jpg"/></p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7" style="min-height:280px"></div> <p></p></div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>