这篇文章主要介绍jquery插件怎么实现图片对比，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
<!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插件怎么实现图片对比”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
