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

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

jQuery plugin to achieve image comparison

The effect is as follows

Code section

Explanation of ideas

Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL

Detailed explanation of nginx current limiting module in Nginx source code research

Two simple ways to remove text watermarks from web pages

Mysql updates certain fields of another table based on data from one table (sql statement)

Working principle and example analysis of Linux NFS mechanism

Vue's detailed code for implementing the shuttle box function

How to build lnmp environment in docker

Detailed tutorial on installing mysql-8.0.13 (zip installation) on windows 10 system

Summary of CSS gradient effects (linear-gradient and radial-gradient)

Web page comments cause text overflow in IE

Recommend

In html table, set different colors and widths for each cell

Differences and comparisons of storage engines in MySQL

Simple usage of MySQL temporary tables

Query the data of the day before the current time interval in MySQL

Use pure CSS to achieve switch effect

Tomcat common exceptions and solution code examples

Modify the style of HTML body in JS

What is HTML?

How to solve the problem of ping being successful but the port being unavailable in Linux

How to use bind to set up DNS server

How to redirect nginx directory path

Detailed steps for installing and debugging MySQL database on CentOS7 [Example]

CentOS7 uses rpm package to install mysql 5.7.18

Deleting the database and running away? How to use xtraback to back up the MySQL database

Fixed table width table-layout: fixed