温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery插件怎么实现图片对比

发布时间:2021-04-30 10:17:59 来源:亿速云 阅读:201 作者:小新 栏目:开发技术

这篇文章主要介绍jquery插件怎么实现图片对比,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

效果如下

jquery插件怎么实现图片对比

代码部分

<!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" >
    <div class="bar" data-flag="0"></div>
   </div>
   <div class="img2" ></div>
  </div>
  <div class="div">
   <div class="img1" >
    <div class="bar" data-flag="0"></div>
   </div>
   <div class="img2" ></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>

以上是“jquery插件怎么实现图片对比”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI