溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js如何自制圖片放大鏡功能

發(fā)布時間：2021-07-09 14:07:22 來源：億速云 閱讀：144 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)js如何自制圖片放大鏡功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

注釋：
small img size：600x400
big img size：1200x800

原理：
1、大圖是小圖的 2倍整
2、大圖以小圖片中心點(diǎn)為中心
      a.transform : translate(-50%,-50%)
      b.(rate-0.5)*50%
      c.clip : rect(t,r,b,l) 以小圖邊界為邊界
3、rect必須有absolute
4、獲取鼠標(biāo)在圖片中的位置
     a.獲取鼠標(biāo)位置 XY
     b.獲取圖片位置、寬度、高度
             i.得到鼠標(biāo)在圖片的百分比位置
             ii.將百分比位置應(yīng)用于大圖 left，top 

問題：
居中理解太差：
          absolute ,left ,top,right,bottom,margin
放大縮小問題：
           起初： transform： scale() 縮放
           利用 transition 過渡
                 結(jié)果，采用這種方法會使得鼠標(biāo)移動時很卡頓
                       可能原因：每次hover 都會觸發(fā) transition事件
           解決方法：采用了 Animate 動畫來實現(xiàn)縮放 

細(xì)節(jié)：
以 onmouse 事件 e 動態(tài)獲得 e.pageX 和 e.pageY
以 $().offset().top /left 獲取圖片位置
以 $().width() /height() 獲取圖片寬高
      在錯誤的操作中也忘了獲取 class 的方法
           $().attr("class")
           $().prop("class")
                    event.traget.className 

如果要實現(xiàn) hover出現(xiàn) 透明的塊狀就在外部 opacity:0.5; 設(shè)置z-index就可以了。

<html>
 <head>
  <meta charset="UTF-8">
  <title>WEBGOD</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   #warpper{
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
    width: 600px;
    height: 400px;
   }
   .small{
    text-align: center;
   }
   .big{
    display: none;
    clip: rect(200px,900px,600px,300px);
    position: absolute;
    width: 1200px;
    height: 800px;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
   }
   .big img{
    position: absolute;
    width: 600px;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
   }
  </style>
 </head>
 <body>
   
  <div id="warpper">
   <div class="small">
    <img src="img/small_19.jpg"/>
   </div>
   <div class="big">
    <img src="img/img_19.jpg"/>
   </div>
  </div>
  <script type="text/javascript">
   $(function(){
    var x,y,left,top,width,height,imgWidth,imgHeight,rateX,rateY;
    $("#warpper").hover(function(){
     $(".big").css("display","block");
     $(".big img").animate({"width":"1200px"},500);
    },function(){
     $(".big img").animate({"width":"600px"},1);
     $(".big").css("display","none");
    })
    $("#warpper").on("mousemove",function(e){
     x = e.pageX;
     y = e.pageY;
     top = $(".small img").offset().top;
     left = $(".small img").offset().left;
     width = $(".small img").width();
     height = $(".small img").height();
     //
     imgWidth = $(".big img").width();
     imgHeight = $(".big img").height();
     rateX = (left+width-x)/width;
     rateY = (top+height-y)/height;
     if(rateX>0&&rateY>0&&rateX<=1&&rateY<=1){
      $(".big img").css("left",(rateX-0.5)*50+"%");
      $(".big img").css("top",(rateY-0.5)*50+"%");
     }
    })
   })
  </script>
 </body>
</html>

感謝各位的閱讀！關(guān)于“js如何自制圖片放大鏡功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手