时间戳

首页 > 解决方案 > 生成具有以下条件的数字序列

javascript - 生成具有以下条件的数字序列

问题描述

我正在尝试创建多个重叠 div 的 3D 图层效果，这些 div 似乎与每个 div 更远。如下图所示。 在此处输入图像描述

实现3D效果；我正在使用内联 css 样式对每个 div 应用右间距和上间距。间距会根据 div 的数量而有所不同。

我需要为每个div生成正确和顶部的位置数字来达到这个效果，这将根据div的数量而有所不同。

通过将最大数量除以 div 的数量，我有一个简单的效果。然而，这使得每个 div 之间的差距相等，因此 3D 效果不那么令人信服。

每个 div 都使用 for 循环添加到 DOM。类似于以下内容

var divsToGenerate = 14;
var divsArr;
var css = {top: 0, right: 335}
for( var i = 0; i < divsToGenerate; i++ ) {
   css = {top: 35, right: 300}
   divsArr += '<div style="top:'+ css.top +'; right:'+ css.right +'"></div>';
}

我无法生成 335 和 0 之间的数字，这将逐渐减少每个通过的 div 之间的差距。赋予它分层的 3D 效果。

标签： javascript

解决方案

您可以生成这样的序列：

[...Array(14).keys()]      // generate array from 0 to 13
.map(x => x / 13)          // convert to a value between 0 and 1
.map(x => 1 - x)           // go from high to low
.map(x => Math.pow(x, 2))  // square to gradually decrease the difference
.map(x => 335 * x)         // convert to a value between 0 and 335
.map(x => x.toFixed(0))    // discard decimal places

您可以更改指数Math.pow(x, 2)以更改转换发生的速度，或Math.exp改用它。

推荐阅读