悬停图像并在画布元素中显示光标周围区域的缩放版本？

Question

我在一个较旧的项目中使用 Magnify.js (http://mark-rolich.github.io/Magnifier.js/)，并希望摆脱它，因为它非常复杂。

我试图通过重构 + 阅读有关该主题的一些文章来构建自己的图像缩放功能，但老实说，代码不会去任何地方，因此由于当时的无能而将其全部删除。

无论如何，对于手头的问题，这就是我希望实现的目标：

1. 我悬停了具有特定 css 类的图像
2. 只有当悬停的是具有该类的图像时，画布元素才会出现在屏幕上
3. 光标周围区域（100 像素 x 100 像素）的放大版本显示在画布元素内
4. 当光标在图像周围移动时，画布会实时更新，以显示上述新悬停区域的放大部分
5. 当悬停停止时，画布项目再次隐藏

听起来很简单，但我对这个问题的看法远非如此。

所以，简而言之，我的问题是：除了 Magnify.js（如上链接）之外，还有其他简单的框架吗？它，你会怎么处理这个问题？

Answer 1

嗯，使用框架是个好主意，因为它解决了跨浏览器问题，并且比您可以从头开始编写的代码功能更全面。

无论如何，如果您的需求非常有限，您可以自己做。顺便说一句，你不会用 jQuery 标记问题，但我会假设你正在使用它。

我认为您不需要使用画布。而是：

1. 将图像放置两次，第二次放置在隐藏容器中。
2. 缩小第一个，以便用作缩略图。
3. 让第二个保持原来的大小，但确保容器有overflow: hidden。
4. 创建一个mousemove 事件。它需要使容器可见。
5. 用e.pageX / e.pageY和$( element ).offset()检测鼠标在图片内的位置。
6. 计算缩略图面积与原始图片大小的比值。
7. 每次移动光标时，根据计算的比例修改原始尺寸图片（容器内的那张）的边距。
8. 创建一个隐藏容器的mouseout 事件。

这里有一个sn-p：

var zoom_container_size = $( '.zoom_container').height();
var zoom_area_size = 100;
var zoom_radius = zoom_area_size / 2;

$( '.thumbnail' ).mousemove(function(e) {
    // Show original picture    
    var $original = $( '#' + this.id + '_original');
    var $container = $original.parent();
    $container.removeClass( 'hidden' );
    // Thumbnail
    var offset = $( this ).offset();
    var tX = e.pageX - offset.left;
    var tY = e.pageY - offset.top;
    // We stay inside the limits of the zoomable area
    tX = Math.max( zoom_radius, Math.min( $( this ).width() - zoom_radius, tX ) );
    tY = Math.max( zoom_radius, Math.min( $( this ).height() - zoom_radius, tY ) );
    // Ratios
    var ratioX = ( $original.width() - zoom_container_size) / ( $( this ).width() - zoom_area_size );
    var ratioY = ( $original.height() - zoom_container_size) / ( $( this ).height() - zoom_area_size );
    // Margin to be set in the original    
    var moX = -Math.floor( ( tX - zoom_radius ) * ratioX );
    var moY = -Math.floor( ( tY - zoom_radius ) * ratioY );
    // Apply zoom efect
    $original.css( 'marginLeft', moX );
    $original.css( 'marginTop', moY );
    // Log values
    $('#ratios').html( 'Ratio X: <b>' + ratioX + '</b><br>Ratio Y: <b>' +  ratioY + '</b>' );
    $('#coordinates_thumbnail').html( 'tX: <b>' + tX + '</b><br>tY: <b>' +  tY + '</b>' );
    $('#coordinates_original' ).html( 'Margin left: <b>' + Math.round(moX) + '</b><br>Margin top: <b>' +  moY + '</b>' );
});

$( '.thumbnail' ).mouseout(function(e) {
    var $original = $( '#' + this.id + '_original');
    var $container = $original.parent();
    $container.addClass( 'hidden' );
});

.main_container div {
    display: inline-block;
}
.thumbnail {
    height: 200px;
}
div.zoom_container {
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.zoom_container.hidden {
    display: none;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A beautiful pic from <a href="https://commons.wikimedia.org/wiki/File:Talv_V%C3%A4ike-Taevaskojas.jpg">Külli Kolina</a>.

<div id="zoom_area"></div>
<div class="main_container">
    <img id="forest" class="thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Talv_V%C3%A4ike-Taevaskojas.jpg/640px-Talv_V%C3%A4ike-Taevaskojas.jpg">
    <div class="zoom_container hidden">
        <img id="forest_original" class="original" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Talv_V%C3%A4ike-Taevaskojas.jpg/640px-Talv_V%C3%A4ike-Taevaskojas.jpg">
    </div>
</div>
<hr><span id="ratios">Ratios</span>
<hr><span id="coordinates_thumbnail">Coordinates</span>
<hr><span id="coordinates_original">Negative margin</span>

很多可以在这段代码中优化（主要与从事件处理程序中获取一些工作有关）以获得更平滑的效果，但你现在有了一个基础开始工作。如果您真的关心性能，可以阅读此other answer（主题不同，但大多数想法都适用）。

希望对您有所帮助！