html zoom on mouse over

我想在網站上有一張照片，當我將鼠標移到上面時，我想要一個放大鏡縮放效果。html zoom on mouse over

我可以使用canvas或者其他方式在html中執行此操作嗎？ javascript可能？

謝謝

2011-02-09 pvinis

帆布不是由IE沒有第三方插件的支持。你會想在JavaScript中做到這一點。 jQuery使這非常簡單和乾淨。爲要使用.hover()縮放的圖像元素的懸停輸入/輸出事件綁定處理程序。「綁定處理程序」僅僅意味着您將兩個函數傳遞給.hover（），分別在用戶懸停和移出時執行.hover（）。這些功能將使用animate()，您可以簡單地通過一個新的大小。

查看.animate()和.hover()的文檔。如果你對jQuery完全陌生，check out the tutorials。

來源

2011-02-09 01:37:28 Ori

您可以顯示在一個div作爲背景圖像的圖像和變化的位置一點點的JavaScript。

下面是一些例子庫：http://www.mind-projects.it/projects/jqzoom/demos.php

來源

2011-02-09 01:34:47 Wolph

不錯！謝謝！。 – pvinis 2011-02-10 09:33:47

如何使用jQZoom使放大區域變爲圓形？ – codecowboy 2011-05-02 10:28:21

我想我找到了你想要的：loupe.js。從我所看到的，這是最好的放大鏡/放大鏡效果之一。

來源

2011-02-09 01:45:14

把你的照片封閉在一個div中，並通過懸停的CSS添加Zoom。懸停時您可能想要增加z-index。您可以添加到下面的CSS中，使縮放的照片外觀/樣式更好。如果你不想重新發明輪子，可以看看一些Jquery插件，它可以用較少的努力以優雅的方式完成同樣的事情。

CSS：

#div-1 { 
      position: absolute; 
     } 
#div-1.hover { 
      position: absolute; zoom: 70%; border: solid 1px; z-index:10; 
     }

的Jquery/JavaScript的：

  <script type = "text/javascript"> 
$(document).ready(function() { 
$(".div-1").onmouseover(function() { 
    toggle_visibility('div-1'); 
}) 

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if ($(e).hasClass("hover")) { 
     $(e).removeClass("hover"); 
    } else { 
     $($(e)).addClass("hover"); 
     $($(e)).attr({ 
      width: "100%", 
      height: "100%" 
     }); 
    } 
}}); < /script>

來源

2011-02-09 01:48:34