縮放圖像全屏

Question

如何放大這樣的效果，當鼠標懸停在圖像enter link description here

Answer 1

$(document).ready(function(){ 
 

 
\t var native_width = 0; 
 
\t var native_height = 0; 
 

 
\t //Now the mousemove function 
 
\t $(".magnify").mousemove(function(e){ 
 
\t \t //When the user hovers on the image, the script will first calculate 
 
\t \t //the native dimensions if they don't exist. Only after the native dimensions 
 
\t \t //are available, the script will show the zoomed version. 
 
\t \t if(!native_width && !native_height) 
 
\t \t { 
 
\t \t \t //This will create a new image object with the same image as that in .small 
 
\t \t \t //We cannot directly get the dimensions from .small because of the 
 
\t \t \t //width specified to 200px in the html. To get the actual dimensions we have 
 
\t \t \t //created this image object. 
 
\t \t \t var image_object = new Image(); 
 
\t \t \t image_object.src = $(".small").attr("src"); 
 
\t \t \t 
 
\t \t \t //This code is wrapped in the .load function which is important. 
 
\t \t \t //width and height of the object would return 0 if accessed before 
 
\t \t \t //the image gets loaded. 
 
\t \t \t native_width = image_object.width; 
 
\t \t \t native_height = image_object.height; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t //x/y coordinates of the mouse 
 
\t \t \t //This is the position of .magnify with respect to the document. 
 
\t \t \t var magnify_offset = $(this).offset(); 
 
\t \t \t //We will deduct the positions of .magnify from the mouse positions with 
 
\t \t \t //respect to the document to get the mouse positions with respect to the 
 
\t \t \t //container(.magnify) 
 
\t \t \t var mx = e.pageX - magnify_offset.left; 
 
\t \t \t var my = e.pageY - magnify_offset.top; 
 
\t \t \t 
 
\t \t \t //Finally the code to fade out the glass if the mouse is outside the container 
 
\t \t \t if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) 
 
\t \t \t { 
 
\t \t \t \t $(".large").fadeIn(100); 
 
\t \t \t } 
 
\t \t \t else 
 
\t \t \t { 
 
\t \t \t \t $(".large").fadeOut(100); 
 
\t \t \t } 
 
\t \t \t if($(".large").is(":visible")) 
 
\t \t \t { 
 
\t \t \t \t //The background position of .large will be changed according to the position 
 
\t \t \t \t //of the mouse over the .small image. So we will get the ratio of the pixel 
 
\t \t \t \t //under the mouse pointer with respect to the image and use that to position the 
 
\t \t \t \t //large image inside the magnifying glass 
 
\t \t \t \t var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1; 
 
\t \t \t \t var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1; 
 
\t \t \t \t var bgp = rx + "px " + ry + "px"; 
 
\t \t \t \t 
 
\t \t \t \t //Time to move the magnifying glass with the mouse 
 
\t \t \t \t var px = mx - $(".large").width()/2; 
 
\t \t \t \t var py = my - $(".large").height()/2; 
 
\t \t \t \t //Now the glass moves with the mouse 
 
\t \t \t \t //The logic is to deduct half of the glass's width and height from the 
 
\t \t \t \t //mouse coordinates to place it with its center at the mouse coordinates 
 
\t \t \t \t 
 
\t \t \t \t //If you hover on the image now, you should see the magnifying glass in action 
 
\t \t \t \t $(".large").css({left: px, top: py, backgroundPosition: bgp}); 
 
\t \t \t } 
 
\t \t } 
 
\t }) 
 
})

/*Some CSS*/ 
 
* {margin: 0; padding: 0;} 
 
.magnify {width: 200px; margin: 50px auto; position: relative;} 
 

 
/*Lets create the magnifying glass*/ 
 
.large { 
 
\t width: 175px; height: 175px; 
 
\t position: absolute; 
 
\t border-radius: 100%; 
 
\t 
 
\t /*Multiple box shadows to achieve the glass effect*/ 
 
\t box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
 
\t 0 0 7px 7px rgba(0, 0, 0, 0.25), 
 
\t inset 0 0 40px 2px rgba(0, 0, 0, 0.25); 
 
\t 
 
\t /*Lets load up the large image first*/ 
 
\t background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat; 
 
\t 
 
\t /*hide the glass by default*/ 
 
\t display: none; 
 
} 
 

 
/*To solve overlap bug at the edges during magnification*/ 
 
.small { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Lets make a simple image magnifier --> 
 
<div class="magnify"> 
 
\t 
 
\t <!-- This is the magnifying glass which will contain the original/large version --> 
 
\t <div class="large"></div> 
 
\t 
 
\t <!-- This is the small image --> 
 
\t <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/> 
 
\t 
 
</div> 
 

 
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes --> 
 
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script> 
 
<!-- You can download it from http://leaverou.github.com/prefixfree/ --> 
 

 
<!-- Time for jquery action --> 
 
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>

Answer 2

試試這個

(function ($) { 
 
    $(document).ready(function() { 
 
     $('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15}); 
 
     $('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'}); 
 
     $('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'}); 
 
     $('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15}); 
 
     $('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15}); 
 

 
     //Integration with hammer.js 
 
     var isTouchSupported = 'ontouchstart' in window; 
 

 
     if (isTouchSupported) { 
 
      //If touch device 
 
      $('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){ 
 
       var xzoom = $(this).data('xzoom'); 
 
       xzoom.eventunbind(); 
 
      }); 
 
      
 
      $('.xzoom, .xzoom2, .xzoom3').each(function() { 
 
       var xzoom = $(this).data('xzoom'); 
 
       $(this).hammer().on("tap", function(event) { 
 
        event.pageX = event.gesture.center.pageX; 
 
        event.pageY = event.gesture.center.pageY; 
 
        var s = 1, ls; 
 
    
 
        xzoom.eventmove = function(element) { 
 
         element.hammer().on('drag', function(event) { 
 
          event.pageX = event.gesture.center.pageX; 
 
          event.pageY = event.gesture.center.pageY; 
 
          xzoom.movezoom(event); 
 
          event.gesture.preventDefault(); 
 
         }); 
 
        } 
 
    
 
        xzoom.eventleave = function(element) { 
 
         element.hammer().on('tap', function(event) { 
 
          xzoom.closezoom(); 
 
         }); 
 
        } 
 
        xzoom.openzoom(event); 
 
       }); 
 
      }); 
 

 
     $('.xzoom4').each(function() { 
 
      var xzoom = $(this).data('xzoom'); 
 
      $(this).hammer().on("tap", function(event) { 
 
       event.pageX = event.gesture.center.pageX; 
 
       event.pageY = event.gesture.center.pageY; 
 
       var s = 1, ls; 
 

 
       xzoom.eventmove = function(element) { 
 
        element.hammer().on('drag', function(event) { 
 
         event.pageX = event.gesture.center.pageX; 
 
         event.pageY = event.gesture.center.pageY; 
 
         xzoom.movezoom(event); 
 
         event.gesture.preventDefault(); 
 
        }); 
 
       } 
 

 
       var counter = 0; 
 
       xzoom.eventclick = function(element) { 
 
        element.hammer().on('tap', function() { 
 
         counter++; 
 
         if (counter == 1) setTimeout(openfancy,300); 
 
         event.gesture.preventDefault(); 
 
        }); 
 
       } 
 

 
       function openfancy() { 
 
        if (counter == 2) { 
 
         xzoom.closezoom(); 
 
         $.fancybox.open(xzoom.gallery().cgallery); 
 
        } else { 
 
         xzoom.closezoom(); 
 
        } 
 
        counter = 0; 
 
       } 
 
      xzoom.openzoom(event); 
 
      }); 
 
     }); 
 
     
 
     $('.xzoom5').each(function() { 
 
      var xzoom = $(this).data('xzoom'); 
 
      $(this).hammer().on("tap", function(event) { 
 
       event.pageX = event.gesture.center.pageX; 
 
       event.pageY = event.gesture.center.pageY; 
 
       var s = 1, ls; 
 

 
       xzoom.eventmove = function(element) { 
 
        element.hammer().on('drag', function(event) { 
 
         event.pageX = event.gesture.center.pageX; 
 
         event.pageY = event.gesture.center.pageY; 
 
         xzoom.movezoom(event); 
 
         event.gesture.preventDefault(); 
 
        }); 
 
       } 
 

 
       var counter = 0; 
 
       xzoom.eventclick = function(element) { 
 
        element.hammer().on('tap', function() { 
 
         counter++; 
 
         if (counter == 1) setTimeout(openmagnific,300); 
 
         event.gesture.preventDefault(); 
 
        }); 
 
       } 
 

 
       function openmagnific() { 
 
        if (counter == 2) { 
 
         xzoom.closezoom(); 
 
         var gallery = xzoom.gallery().cgallery; 
 
         var i, images = new Array(); 
 
         for (i in gallery) { 
 
          images[i] = {src: gallery[i]}; 
 
         } 
 
         $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}}); 
 
        } else { 
 
         xzoom.closezoom(); 
 
        } 
 
        counter = 0; 
 
       } 
 
       xzoom.openzoom(event); 
 
      }); 
 
     }); 
 

 
     } else { 
 
      //If not touch device 
 

 
      //Integration with fancybox plugin 
 
      $('#xzoom-fancy').bind('click', function(event) { 
 
       var xzoom = $(this).data('xzoom'); 
 
       xzoom.closezoom(); 
 
       $.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}}); 
 
       event.preventDefault(); 
 
      }); 
 
      
 
      //Integration with magnific popup plugin 
 
      $('#xzoom-magnific').bind('click', function(event) { 
 
       var xzoom = $(this).data('xzoom'); 
 
       xzoom.closezoom(); 
 
       var gallery = xzoom.gallery().cgallery; 
 
       var i, images = new Array(); 
 
       for (i in gallery) { 
 
        images[i] = {src: gallery[i]}; 
 
       } 
 
       $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}}); 
 
       event.preventDefault(); 
 
      }); 
 
     } 
 
    }); 
 
})(jQuery);

<link href="https://unpkg.com/xzoom@1.0.7/dist/xzoom.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-2.1.1.js"></script> 
 
<script src="https://unpkg.com/xzoom@1.0.7/dist/xzoom.min.js"></script> 
 
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script> 
 
<body> 
 
    
 
    <div class="container"> 
 
    
 
    <!-- default start --> 
 
    <section id="default" class="padding-top0"> 
 
    <div class="row"> 
 
     <div class="large-12 column"><h3>Product Zooming</h3></div> 
 
     <hr> 
 
     <div class="large-5 column"> 
 
     <div class="xzoom-container"> 
 
      <img class="xzoom" id="xzoom-default" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" xoriginal="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/01_b_car.jpg" /> 
 
      <div class="xzoom-thumbs"> 
 
      <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/01_b_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/thumbs/01_b_car.jpg" xpreview="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" title="The description goes here"></a> 
 
       
 
      <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/02_o_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/02_o_car.jpg" title="The description goes here"></a> 
 
       
 
      <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/03_r_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/03_r_car.jpg" title="The description goes here"></a> 
 
       
 
      <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/04_g_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/04_g_car.jpg" title="The description goes here"></a> 
 
      </div> 
 
     </div>   
 
     </div> 
 
     <div class="large-7 column"></div> 
 
    </div> 
 
    </section> 
 
    <!-- default end --> 
 
    </div> 
 
    </body>