jQuery/CSS图像缩放-屏幕捕获？

我有一个形象！当鼠标悬停在图像上时，jQuery（或CSS！）是否可以“检测”鼠标周围的区域，捕获下面的图像，然后缩放该图像

所以！与我在网上看到的jQuery缩放不同，jQuery缩放有两个图像——小图像和大图像——这一个没有使用任何奇特的算法来计算鼠标相对于小图像的位置，然后显示大图像的那一部分。 相反，这可能会使用一种奇特的算法捕捉鼠标周围的区域，然后将其炸毁

如果有一个插件可以做到这一点，那就是向导。如果没有，是否有人知道是否有可能：

a。使用jQuery/JavaScript/CSS/HTML5捕获鼠标周围的屏幕？

---

B使用jQuery放大捕获的图像？

以下是我不久前编写的一些代码，用于为幻灯片“缩放”缩略图图像：

$(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);
});

下面是一个演示：

如果您对这段代码感兴趣，我可以编写一些文档，让它更清晰一些。还要注意，此代码利用了CSS3

transform

属性，因此旧浏览器需要更多的代码

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

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