• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

jquery插件实现图片对比

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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" 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>

思路解释

感觉很简单,就是俩图作为背景图片然后控制他的布局位置,控制容器的宽高就行了
需要做适应性优化的还有背景图大小的控制,当然父容器不会变化就不会出问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序视频弹幕位置随机发布时间:2022-02-05
下一篇:
JS ES6展开运算符的几个妙用发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap