用鼠標懸停在HTML/CSS上的圖像的放大效果

Question

僅僅通過html和css就可以實現這種效果嗎？在示例圖像中，您可以看到鼠標懸停的放大的圓形區域（來自更高分辨率的源圖片）。它不是四捨五入的區域或有邊界。

example of desired Magnifiing effect over a image with mouse hover with HTML/CSS

在此site example你可以看到一個很好的例子（但它使用jQuery和我不知道在哪裏可以在我的網頁把這個代碼）

可以在這裏任何人給我一個線索如何開始編碼？ （如果這是可行的）。非常感謝！

Answer 1

要使用第二個例子是簡單 只有HTML複製你的HTML頁面，在你的CSS頁面的CSS和HTML頁面中的jQuery代碼這樣

<script type="text/javascript">$(document).ready(function(){ 

var native_width = 0; 
var native_height = 0; 

//Now the mousemove function 
$(".magnify").mousemove(function(e){ 
    //When the user hovers on the image, the script will first calculate 
    //the native dimensions if they don't exist. Only after the native dimensions 
    //are available, the script will show the zoomed version. 
    if(!native_width && !native_height) 
    { 
     //This will create a new image object with the same image as that in .small 
     //We cannot directly get the dimensions from .small because of the 
     //width specified to 200px in the html. To get the actual dimensions we have 
     //created this image object. 
     var image_object = new Image(); 
     image_object.src = $(".small").attr("src"); 

     //This code is wrapped in the .load function which is important. 
     //width and height of the object would return 0 if accessed before 
     //the image gets loaded. 
     native_width = image_object.width; 
     native_height = image_object.height; 
    } 
    else 
    { 
     //x/y coordinates of the mouse 
     //This is the position of .magnify with respect to the document. 
     var magnify_offset = $(this).offset(); 
     //We will deduct the positions of .magnify from the mouse positions with 
     //respect to the document to get the mouse positions with respect to the 
     //container(.magnify) 
     var mx = e.pageX - magnify_offset.left; 
     var my = e.pageY - magnify_offset.top; 

     //Finally the code to fade out the glass if the mouse is outside the container 
     if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) 
     { 
      $(".large").fadeIn(100); 
     } 
     else 
     { 
      $(".large").fadeOut(100); 
     } 
     if($(".large").is(":visible")) 
     { 
      //The background position of .large will be changed according to the position 
      //of the mouse over the .small image. So we will get the ratio of the pixel 
      //under the mouse pointer with respect to the image and use that to position the 
      //large image inside the magnifying glass 
      var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1; 
      var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1; 
      var bgp = rx + "px " + ry + "px"; 

      //Time to move the magnifying glass with the mouse 
      var px = mx - $(".large").width()/2; 
      var py = my - $(".large").height()/2; 
      //Now the glass moves with the mouse 
      //The logic is to deduct half of the glass's width and height from the 
      //mouse coordinates to place it with its center at the mouse coordinates 

      //If you hover on the image now, you should see the magnifying glass in action 
      $(".large").css({left: px, top: py, backgroundPosition: bgp}); 
     } 
    } 
}) 

}

使用此代碼之間，並在您的HTML頁面

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>