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

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。这将给你一个线性比例，你也可以使用其他缩放功能，但我现在就把它留给你玩。 ：）