Question

我正在寻找一种在用户滚动时更改字体大小的方法。我希望将它与滚动位置同步，以便在用户向下滚动时字体大小随着动画而减小，并且在用户向上滚动时字体大小随着动画而增加。

有人知道如何用Javascript做到这一点吗？

Answer 1

这可以通过jQuery库完成，它内置在.scroll()和.css()元素中。

但是，您需要查找如何使用这些元素，并至少尝试来实现此代码。

在您尝试但仍无法掌握之后，请使用完整的html，css和jS返回，然后您可能有资格获得帮助。

Answer 2

你可以，在jQuery 中使用 mouse wheel 事件 ：

jsfiddle link

$(document).ready(function(){
    $('.content-wrap').bind('mousewheel', function(e){
    	var current = parseInt($(this).css('font-size'));
        if(e.originalEvent.wheelDelta /120 > 0) {
            $('.content-wrap').css("font-size" , (current +1) +"px");
        }
        else{  
            $('.content-wrap').css("font-size" , (current - 1)+"px");
        }
    });
});

.content-wrap {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-wrap">
         hello world
    <br/>hello world
    <br/>hello world
    <br/>hello world
</div>

如何在滚动时更改字体大小

2 个答案: