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

The table tbody in HTML can slide up and down and left and right

jQuery plugin to achieve image comparison

The effect is as follows

Code section

Explanation of ideas

The table tbody in HTML can slide up and down and left and right

Automatic failover of slave nodes in replication architecture in MySQL 8.0.23

The tdwidth setting of the table in multiple divs is the same and cannot be aligned

MySQL 5.7.16 free installation version installation and configuration method graphic tutorial

The principle and application of ES6 deconstruction assignment

Markup Language - Title

Why Use DOCTYPE HTML

Detailed analysis of each stage of nginx's http request processing

CentOS7.5 installation of MySQL8.0.19 tutorial detailed instructions

Example of making XML online editor using js

Recommend

How to successfully retrieve VMware Esxi root password after forgetting it

Steps to install MySQL 5.7 in binary mode and optimize the system under Linux

Docker installation steps for Redmine

A must-read career plan for web design practitioners

Sqoop export map100% reduce0% stuck in various reasons and solutions

How to migrate local mysql to server database

Mybatis paging plug-in pageHelper detailed explanation and simple example

Research on the effect of page sidebar realized by JS

JS achieves five-star praise case

js to achieve cool fireworks effect

Detailed process of upgrading glibc dynamic library in centos 6.9

MySQL automatically inserts millions of simulated data operation code

Vue implements local storage add, delete and modify functions

Detailed explanation of the commonly used functions copy_from_user open read write in Linux driver development

How to import SQL files in Navicat Premium