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:
|
<<: MySQL 5.7.21 installation and configuration method graphic tutorial (window)
>>: Detailed explanation of Nginx static file service configuration and optimization
Recommend
Vue imitates ElementUI's form example code
Implementation requirements The form imitating El...
Detailed explanation of CSS BEM writing standards
BEM is a component-based approach to web developm...
Detailed explanation of using the at command for one-time scheduled tasks in Linux
Table of contents Preface 1. Introduction to one-...
JavaScript+html to implement front-end page sliding verification
This article shares the specific code of JavaScri...
Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project
I divide the whole process into four steps: Downl...
Does Mysql ALTER TABLE lock the table when adding fields?
Table of contents Before MySQL 5.6 After MySQL 5....
Research on the problem of flip navigation with tilted mouse
In this article, we will analyze the production of...
How to modify the ssh port number in Centos8 environment
Table of contents Preface start Preface The defau...
Recommended 20 best free English handwriting fonts
Jellyka BeesAntique Handwriting [ank]* Jellyka Cut...
Summary of the data storage structure of the nginx http module
Starting from this section, we will explain the i...
Detailed explanation of the principle and usage of MySQL views
This article uses examples to illustrate the prin...
Use of Vue3 table component
Table of contents 1. Ant Design Vue 1. Official w...
MySQL SQL statement analysis and query optimization detailed explanation
How to obtain SQL statements with performance iss...
Vue encapsulates a TodoList example and implements the application of browser local cache
This article mainly introduces the case of Vue en...
JavaScript Closures Explained
Table of contents 1. What is a closure? 2. The ro...