jQuery plugin to achieve image comparison

This article example shares the specific code of the jQuery plug-in to achieve image comparison for your reference. The specific content is as follows

A very common effect, not difficult to do

The effect is as follows

Code section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Compare pictures</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    user-select: none;
   }
   .div{
    border: 1px solid lightgray;
    width: 400px;
    height: 200px;
    margin: 10px;
    float: left;
    position: relative;
   }
   .img1{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
   }
   .img2{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
   }
   .img1,.img2{
    background-position: center center;
    background-size: 400px 200px;
    background-repeat: no-repeat;
   }
   .img1{
    background-position-x: 0;
   }
   .img2{
    background-position-x: 100%;
    filter: invert(100%);
   }
   .bar{
    position: absolute;
    top: 0;
    bottom: 0;
    right:-4px;
    width: 8px;
    background-color: gray;
    cursor:ew-resize;
    opacity: 0.2;
   }
   .stop{
    pointer-events: none;
   }
  </style>
 </head>
 <body>
  <div class="div">
   <div class="img1" style="background-image: url(img/1.jpg);">
    <div class="bar" data-flag="0"></div>
   </div>
   <div class="img2" style="background-image: url(img/1.jpg);"></div>
  </div>
  <div class="div">
   <div class="img1" style="background-image: url(img/2.jpg);">
    <div class="bar" data-flag="0"></div>
   </div>
   <div class="img2" style="background-image: url(img/2.jpg);"></div>
  </div>
 </body>
</html>
<script>
 $(document).ready(function(){
  $(".bar").mousedown(function(){
   $(this).parent().addClass("stop");
   $(this).parent().next().addClass("stop");
   $(this).attr("data-flag","1")
  })
  $(".div").mousemove(function(e){
   var temp = $(this).find('.bar').attr("data-flag");
   if(temp=="1"){
    var w = $(this).width();
    var x = e.offsetX;
    var p = parseFloat((x/w).toFixed(2))*100;
    $(this).children(".img1").css('width',p+'%');
    $(this).children(".img2").css('left',p+'%');
   }
  })
  $(document).mouseup(function(){
   $(".img1,.img2").removeClass("stop");
   $(".bar").attr("data-flag","0")
  })
 })
</script>

Explanation of ideas

It feels very simple. Just use two pictures as background pictures and control their layout position and the width and height of the container. The size of the background picture needs to be controlled for adaptive optimization. Of course, there will be no problem if the parent container does not change.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

jQuery image before and after comparison plugin beforeAfter usage example [with demo source code download]
jQuery plugin jquery.beforeafter.js implements the method of dragging the separator bar left and right to compare pictures

<<: MySQL 5.7.21 installation and configuration method graphic tutorial (window)

>>: Detailed explanation of Nginx static file service configuration and optimization