jquery---仿淘寶商品圖片區域性放大
阿新 • • 發佈：2018-12-19
本篇博文用於簡單記錄圖片放大功能實現
功能實現還存在一些小漏洞在文章結尾提出，希望各位指正
1、圖片放大初考慮將圖片轉換為字型圖片形式，然後進行放大處理，但最終本人技術不過關無法實現，後用width: 200%;進行一般的圖片放大，所以當圖片越大就存在一些失真；
2、圖片放大後的顯示為本次實現的關鍵，通過獲取滑鼠指標的位置從而獲取指標在圖片的那一個位置，再以當前位置進行圖片放大，放大後將圖片進行偏移，偏移量以滑鼠指標在原圖的位置上獲取的left和top值乘以放大倍數就可以顯示區域性放大的功能了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script> <style> *{margin: 0;padding: 0;} .div1{ width: 450px; height: 300px; overflow: hidden; display: inline-block; } .div1>img{width: 100%;} .div2{ width: 450px; height: 300px; border: 1px solid #A9A9A9; overflow: hidden; display: inline-block; position: relative; } .div2>img{ position: absolute; width: 200%; height: 200%; } .list1{ width: 70px; height: 50px; float: left; margin-left: 10px; } .list1>img{width: 100%;} #zhezhao{ width: 100px; height: 100px; background: #BC8F8F; opacity: 0.7; display: none; position: absolute; } </style> </head> <body> <div class="div1"> <img src="../img/wall1.jpg" alt="" class="img1" /> <div id="zhezhao"></div> </div> <div class="div2"></div> <div class="list"> <div class="list1"> <img src="../img/wall2.jpg" alt="" class="listimg1" /> </div> <div class="list1"> <img src="../img/wall3.jpg" alt="" class="listimg2" /> </div> <div class="list1"> <img src="../img/wall4.jpg" alt="" class="listimg3" /> </div> <div class="list1"> <img src="../img/wall6.jpg" alt="" class="listimg4" /> </div> <div class="list1"> <img src="../img/wall5.jpg" alt="" class="listimg5" /> </div> </div> <script> $(function(){ $('.list1').mouseover(function(){ $('.div1').children()[0].src = $(this).children()[0].src; }); $('.div1').mousemove(function(e){ $('#zhezhao').css({ left: e.clientX-50+'px', top: e.clientY-50+'px', display: 'block' }); var $img = $('.div1').children().eq(0); $('.div2').empty(); $('.div2').append($img.clone()); $('.img1').css({ left: -(e.clientX-50)*2+'px', top: -(e.clientY-50)*2+'px' }); if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) { $('#zhezhao').css({ display: 'none' }); }else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300) $('#zhezhao').css({ left: e.clientX-50+'px', top: e.clientY-50+'px', display: 'block' }); } }); }); </script> </body> </html>
本功能在具體操作上還存在一些問題，當滑鼠快速移開原圖區域時，無法有效的監聽到滑鼠移出區域的事件，在考慮使用移出事件時，滑鼠懸浮於原圖上的遮罩層影響力滑鼠在原圖上的移出事件，無法很好的解決，希望各位幫忙移出事件。