Question

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

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

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

我将图片悬停在特定的css类
只有当具有该类的图像悬停在
光标周围区域的放大版本（100px x 100px）显示在画布元素内
当光标在图像周围移动时，画布会实时更新，以显示如上所述的新悬停区域的放大部分
当悬停停止时，画布项目将再次隐藏

听起来很简单，但我对这个问题的看法还远远不够。

所以，我的问题，简而言之就是：除了Magnify.js（如上所述）之外，是否有任何简单的框架，你知道我可以检查出来，或者它是否足够简单，我只是过于复杂化它，你会怎么解决这个问题？

Answer 1

好吧，使用框架是一个好主意，因为它解决了跨浏览器问题，并且是一个功能更全面的解决方案，而不是您可以从头开始制作的代码。

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

我认为你不需要使用画布。代替：

将图像放置两次，第二次放入隐藏的容器中。
缩小第一个，以便您可以用作缩略图。
将第二个保留原始大小，但确保容器具有overflow: hidden。
创建mousemove个活动。它需要使容器可见。
使用e.pageX / e.pageY和$( element ).offset()检测图片中鼠标的位置。
计算缩略图区域与原始图片尺寸之间的比率。
每次移动光标时，请根据计算的比例修改原始尺寸图片（容器内的图片）的边距。
创建一个隐藏容器的mouseout事件。

这里有一个片段：

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（主题不同，但大多数想法都以相同的方式应用）。

希望它有所帮助！

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

1 个答案: