这篇文章主要介绍Jquery插件怎么实现图片对比，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！jquery是什么jquery是一个简洁而快速的javascript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵
这篇文章主要介绍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插件怎么实现图片对比”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: jquery插件怎么实现图片对比
本文链接: https://www.lsjlt.com/news/275573.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
2024-05-12
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0