jquery外掛實現圖片對比
阿新 • • 發佈：2021-05-02
本文例項為大家分享了jquery外掛實現圖片對比的具體程式碼，供大家參考，具體內容如下
很常見的一個效果，做起來不難
效果如下
程式碼部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做圖片對比</title> <script src="js/jquehttp://www.cppcns.comry-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 claybIhgXZss="img1" style="background-image: url(img/1.jpg);"> <div class="bar" data-flag="0"></div> </div> <div class="img2" style="background-image: url(img/http://www.cppcns.com1.jpg);"></div> </div> <div class="div"> <div class="img1" style="baybIhgXZckground-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).atybIhgXZtr("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>
思路解釋
感覺很簡單，就是倆圖作為背景圖片然後控制他的佈局位置，控制容器的寬高就行了
需要做適應性優化的還有背景圖大小的控制，當然父容器不會變化就不會出問題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。