jQuery/CSS圖像縮放 - 屏幕截圖？

Question

我有一張圖片！當鼠標懸停在圖像上時，jQuery（或CSS！）是否可以「檢測」鼠標周圍的區域，在下面捕獲圖像，然後縮放該圖像？

所以！與我在網上看到的jQuery縮放不同，在這裏有兩個圖像 - 大小不一 - 這個不使用任何花哨的算法來確定鼠標與小的相關位置，然後顯示大部分。相反，這可能會使用一種奇特的算法來捕捉鼠標周圍的區域，然後將它炸掉！

如果有一個插件可以做到這一點，那就是嚮導。如果沒有，是否有人知道是否有可能：

a。使用jQuery/JavaScript/CSS/HTML5捕獲鼠標周圍的屏幕？ b。使用jQuery炸燬捕獲的圖像？

Answer 1

下面是一些代碼，我寫了前一陣子「縮放」縮略圖的幻燈片：

$(function() { 
    $('#container-id').bind('mousewheel', function (event, delta) { 
     event.preventDefault(); 
     var sc = $.data(this, 'scale'); 
     if ((delta == 1 && sc < 5) || (delta == -1 && sc > 1)) { 
      sc += delta; 
      $.data(this, 'scale', sc); 
      $(this).find('img').css({ 
       WebkitTransform : 'scale(' + sc + ')', 
        MozTransform : 'scale(' + sc + ')', 
        MsTransform : 'scale(' + sc + ')', 
        OTransform : 'scale(' + sc + ')', 
         Transform : 'scale(' + sc + ')' 
      }); 
     } 
    }).bind('mousemove', function (event) { 
     //only run the code if the thumbnail is zoomed in, otherwise there is no point in doing these calculations 
     var sc = $.data(this, 'scale') || 1;//scale 
     if (sc > 1) { 
      var $this = $(this), 
       X = (typeof(event.offsetX) == 'undefined') ? (event.pageX - $this.offset().left) : (event.offsetX),//current cursor X position in bullet element 
       Y = (typeof(event.offsetY) == 'undefined') ? (event.pageY - $this.offset().top) : (event.offsetY),//current cursor Y position in bullet element 
       w = 100,//width of a thumbnail 
       h = 100,//height of a thumbnail 
       nX = ((w/2) - X),//new X 
       nY = ((h/2) - Y),//new Y 
       tf = 'translate(' + (nX * (sc - 1)) + 'px, ' + (nY * (sc - 1)) + 'px) scale(' + sc + ')';//transform string 
      $this.find('img').css({ 
       WebkitTransform : tf, 
        MozTransform : tf, 
        MsTransform : tf, 
        OTransform : tf, 
         Transform : tf 
      }); 
     } 
    }).bind('mouseleave', function() { 
     //reset .has-thumb element on mouseleave 
     $.data(this, 'scale', 5); 
     $(this).find('.thumb-image').css({ 
      WebkitTransform : 'translate(0, 0) scale(1)', 
       MozTransform : 'translate(0, 0) scale(1)', 
       MsTransform : 'translate(0, 0) scale(1)', 
       OTransform : 'translate(0, 0) scale(1)', 
        Transform : 'translate(0, 0) scale(1)' 
     }); 
    }); 
    $.data($('#container-id')[0], 'scale', 5); 
}); 

樣本HTML看起來像這樣：

<div id="container-id"> 
    <img src="..." /> 
</div> 

和一些CSS來包裝，它-up：

#container-id { 
    width : 100px; 
    height : 100px; 
    overflow : hidden; 
} 
#container-id img { 
    width : 100px; 
    height : 100px; 
} 

這裏是一個演示：http://jsfiddle.net/Bbsze/1/

如果您對此代碼感興趣，我可以編寫一些文檔以使其更加清晰。另請注意，此代碼利用CSS3 transform屬性，以便舊的瀏覽器需要更多的代碼。