javascript - 相对于浏览器窗口中的位置缩放文本。

Question

我目前在我的元素中遇到了一些数学问题。我正在尝试根据它与浏览器窗口中心的距离来缩放页面中的 div，因此当它位于窗口中心时它是全尺寸的，但是当您向下或向上滚动时它会缩小仿佛要消失。我只是在为如何计算这个值而苦苦挣扎。

提前致谢，哈利。

Answer 1

让 x 和 y 成为你的 div 相对于浏览器窗口的位置

window.innerHeight 和 window.innerWidth 将为您提供当前可见窗口的高度和宽度。

var w = window.innerWidth;
var h = window.innerHeight;

中心将是

var center = (w/2, h/2);

到中心的距离是:

var distance = Math.sqrt((w/2 - x)*(w/2 - x), (h/2 - y)*(h/2 - y));

现在您想要缩放 div，使其在距中心的距离为 0 时达到最大尺寸，在距离中心越远时尺寸越小。

最简单的做法是使用 w - distance 的宽度和 h - distance 的高度。这会给你一个线性比例，你也可以使用其他比例函数，但我现在会把它留给你玩。 :)