jquery插件實現(xiàn)圖片對比

更新時間：2021年04月30日 08:06:00 作者：阿飛超努力

這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)圖片對比，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery插件實現(xiàn)圖片對比的具體代碼，供大家參考，具體內(nèi)容如下

很常見的一個效果，做起來不難

效果如下

代碼部分

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>做圖片對比</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>