更改div下文本的字体大小

Question

如何更改div元素下的文本大小？

JS小提琴

$(document).keydown(function (ev){
    if (ev.which == 75 && $("#glass").hasClass("glass"))
    {
        $("#glass").removeClass("glass");
    }

    else if (ev.which == 75 && !$("#glass").hasClass("glass"))
    {
        $("#glass").addClass("glass");
    }

})

$(document).ready( function() {

    $("#glass").addClass("glass");

    $(document).mousemove(function (event) {
            $("#glass").css({
                left: event.pageX,
                top:  event.pageY,
            });

        $("#divX").text(event.pageX);
        $("#divY").text(event.pageY);

    });
});

div下带有红色边框的所有内容都必须更改。 我该如何解决这个问题？

Answer 1

有很多库可以在图像上使用放大镜效果。 但是，如果要在文本上执行此操作，则唯一的方法是让第二个具有相同文本内容的隐藏div具有更大的字体大小，只有当您将鼠标悬停在第一个文本div上时才会出现。

您需要做一些数学运算来弄清楚如何显示悬停的div对应部分。

我认为使用这个我发现的名为AnythingZoomer的漂亮库会容易得多： http : //css-tricks.com/examples/AnythingZoomer/text.php （它也是开源的）。

Answer 2

尝试查找预制选项。

例如：

http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

尽管此图以及许多其他示例将使用图像，但是您始终可以将图像对象替换为div，这将需要更多的构造。 另外，如果您未在页面上强行设置固定宽度，则可能会分崩离析（除非您也在“放大” div中也考虑了这一点）。