首頁 > 開發者 > JavaScript

自製圖片放大鏡，自製放大鏡

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

自製圖片放大鏡，自製放大鏡
注釋：

  • small img size：600x400
  • big img size：1200x800
 原理：
  • rect必須有absolute
  • 擷取滑鼠在圖片中的位置
    •  問題：
    • 置中理解太差：
      • absolute ,left ,top,right,bottom,margin
    • 放大縮小問題：
      • 起初： transform： scale() 縮放
      • 利用 transition 過渡
        • 結果，採用這種方法會使得滑鼠移動時很卡頓
          • 可能原因：每次hover 都會觸發 transition事件
      • 解決方案：
        • 採用了 Animate 動畫來實現縮放
     細節：
    • 以 onmouse 事件 e 動態獲得 e.pageX 和 e.pageY
    • 以 $().offset().top /left 擷取圖片位置
    • 以 $().width() /height() 擷取圖片寬高
      • 在錯誤的操作中也忘了擷取 class 的方法
        • $().attr("class")
        • $().prop("class")
          • event.traget.className
     如果要實現 hover出現 透明的塊狀就在外部 opacity:0.5; 設定z-index就可以了。  
    <!DOCTYPE html><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>

     

    本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

    聯繫我們

    該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    Get Started for Free

    • Sales Support

      1 on 1 presale consultation

      Chat Contact Sales

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

      Open a Ticket

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

      Learn More