Question

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

原来如此！不像我在网上看过的jQuery变焦，那里有两个图像 - 小和大 - 这个没有使用任何花哨的算法来计算鼠标相对于小的位置，然后显示那个大的部分。相反，这可能会使用一种奇特的算法来捕捉鼠标周围的区域，然后把它炸掉！

如果有一个插件执行此操作，那将是向导。如果没有，有没有人知道是否有可能：

一个。使用jQuery / JavaScript / CSS / HTML5捕获鼠标周围的屏幕？
湾用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包装起来：

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

以下是演示：http://jsfiddle.net/Bbsze/1/

如果您对此代码感兴趣，我可以编写一些文档以使其更清晰。另请注意，此代码利用CSS3 transform属性，因此旧版浏览器需要更多代码。

jQuery / CSS图像缩放 - 屏幕截图？

1 个答案: