Question

我有一个页面，出于设计目的，它具有大图像和文本的小div。在移动设备（小屏幕）上我希望文本div从右下角放大以填充屏幕。滚动时有没有办法让元素从25％变为最大90％？可以顺利完成，因为滚动发生在100像素滚动内吗？

Answer 1

假设特定div具有id“div”，那么这是一个应该起作用的简单解决方案

$.ready(function()
{
    var init_x = $('#div').offset().left;
    var init_y = $('#div').offset().top;
    var init_fs = $('#div').css('font-size');
    $('#div').scroll(function()
    {
        var ma = 90;
        var mi = 25;
        var threshold = 100;
        var distance = $('#div').top - $(window).top;
        if(distance <= threshold && distance >= 0)
        {
            var new_size = (distance/threshold % (ma-mi+1)) + mi;
            var new_left = init_x*(1 - ((distance/threshold % (ma-mi+1)) + mi); 
            var new_top = init_y*(1 - ((distance/threshold % (ma-mi+1)) + mi); 
            $('#div').offset(new_left, new_top)
            $('#div').css({'font-size': new_size.toString() + "%" });
        } else {
            $('#div').css({'font-size': init_fs });
            $('#div').offset(init_x, init_y);
        }
    });
});

这样做也可以让你滚动超过threshold像素后通过div，它的设置会恢复到初始设置，但你可以删除这种行为。

此外，为了使其正常工作，请确保ID为“div”的特定div在其css中具有position: absolute;;

滚动以更改div的大小

1 个答案: