Question

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

$(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替换图像对象，它只需要更多的构造。此外，如果您不强制在页面上固定宽度，它可能会分崩离析（除非您在＆＃34;放大＆＃34; div也是如此。

在div下更改文本的字体大小

2 个答案: