数码资讯
基于Javaｓｃｒｉｐｔ的div元素循环排列（三）的实现
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
$（这）。Css（{左：Math.sin（（AHD *指数+ ainhd））*半径+ dotleft，顶：Math.cos（（（AHD *指数+ ainhd））*半径+ dottop }）；
设计素描 uff1a
分析图：
在上面的图片中：
布莱克：这是个外容器；
黄色：需要用椭圆移动的图片。
橙色：从每一个图片元素到容器顶部的距离。
紫色：长或短半径；
蓝色：从容器顶部到容器顶部的最大距离。
坐标轴；
白色：椭圆运动轨迹；
一、原理分析：
1.1椭圆运输
前两篇文章分析了圆形排列和圆周运动。在知道了这两个的安排和动作之后，我们应该再看看这个例子。
根据上一篇文章的分析，循环运动的公式如下：
$（这）。Css（{左：Math.sin（（AHD *指数+ ainhd））*半径+ dotleft，顶：Math.cos（（（AHD *指数+ ainhd））*半径+ dottop }）；
（如果这个公式不清楚，你可以看到它前面的运动）。
现在我们将被椭圆传送，但是我们能应用上面的公式吗
是的，但是…需要稍微改变一下。
椭圆和圆的区别是什么
它是一个半径；圆只有一个半径，椭圆有两个，一个长半径，一个很短的半径，如上面的图形中的OA和OB，紫色线段；
因此公式的半径需要用一个长半径和一个短半径来替换，其他的没有改变，如下所示：
$（这）。Css（{左：Math.sin（（AHD *指数+ ainhd））* + dotleft OB，顶：Math.cos（（（AHD *指数+ ainhd））* OA + dottop }）；
2.2安排的宽度和透明度的变化
排列在椭圆中的图片的宽度和透明度的变化规律是什么，或者它们的特点是什么
从容器顶部的距离；如上图所示，橙色线的长度。发现相同长度、高度和透明度应与运输期间相同长度的橙色线段相同长度。
因此，我们通过橙色线设置图片的宽度、高度和透明度。
这里的宽度和高度的变化，透明度是一个比例的变化，所以我们需要一个比例，这个比例是乘以图像的宽度和高度的1倍，图片是原来的大小，如果比例小于1，那么图片的宽度应该小于图片的正常大小。
如何得到这个比例值
线段的长度以橙色到蓝色，去掉线段的长度；因为蓝线的长度是橙色线的最大长度；所以，这个比值是在0到0之间的数目；也符合上述，同一条橙色线应该具有相同的长度、宽度、高度、透明度；
下面的公式是找出每幅图片在距离顶部的值，也就是上面图片中橙色线估计的长度。
（Math.cos（（（AHD *指数+ ainhd））* B + dottop）
下面的公式是找到关键的比例值allpers，这totpop在上图的蓝线的长度，橙色的最大值。
无功allpers =（Math.cos（（（AHD *指数+ ainhd））* B + dottop） / tottop；
因为比例是根据橙色线的长度。（蓝线，橙色线是固定的，值是运动的变化），所以用它来乘以宽度和高度，透明度就是我们可以达到相同的长度，橙色线的运动画面，应该有相同的宽度和高度，透明度。
因为最小值可能是0，所以我们必须用一个函数来处理：
无功wpers = math.max（0.1，allpers）；
无功hpers = math.max（0.1，allpers）；
美元（这个）。Css（{
宽度：wpers *呢，
高度：hpers *黑，
不透明度：allpers
}）；
2.3指标值
我们最近的图片的视觉距离，应该在顶部，对Z指数的绝对定位应该是最大的，而最小值，因为此值也与运动图像的变化，所以我们使用上述allpers率值，这个值是0-1之间，所以我们使用一个函数：
Math.ceil（allpers * 10），允许其值应介于1-10
（因为我们这里只有十张图片，如果更多的话，这个公式需要改变）。
三。完整的代码
$（函数（）{（））
/水平坐标中心
Var（dotleft = $（集装箱）（宽度）$（，点），宽度（ / 2-100））；
坐标中心
Var（dottop = $（集装箱）（的高度）$（，点），高度（ / 2-100））；
椭圆{长边}
a = 460；
椭圆的短边
b＝120；
的起点
VaR标准= 0；
每个框对应的角度；
VaR的AVD = 360 / $（。容器IMG）。长度；
每个框对应的弧度；
VaR和= AVD *数学。π/ 180；
移动速度
var速度= 2；
图像宽度和高度
VaR WID =（美元。集装箱集团）的Width（）；
黑= $（var。容器IMG）。Height（）；
顶部的总值
无功tottop = dottop + 100；
设置一个位置圆的中心
$（，点），Css（{左：dotleft，顶：dottop }）；
移动函数
无功fun_animat =函数（）{（）
速度=速度< 360speed：2；
传输速度
速度+ 2；
移动距离，即运动曲线数；
无功ainhd =速度*数学。π/ 180；
根据速度来确定div元素
$（。容器IMG）。每个（函数（指数、元）{）
无功allpers =（Math.cos（（（AHD *指数+ ainhd））* B + dottop） / tottop；
无功wpers = math.max（0.1，allpers）；
无功hpers = math.max（0.1，allpers）；
美元（这个）。Css（{
左：Math.sin（（AHD *指数+ ainhd））* + dotleft，
顶：Math.cos（（AHD *指数+ ainhd））* B + dottop，
Z：Math.ceil（allpers×10），
宽度：wpers *呢，
高度：hpers *黑，
不透明度：allpers
}）；
}）；
}
定时运动函数调用
无功setanimate = setInterval（fun_animat，100）；
}）
在明确了原理之后，代码量很少！~ ~
以上就是本文的全部内容。我们希望能帮助你。感兴趣的朋友可以看到基于Javaｓｃｒｉｐｔ的循环div元素（1）和根据Javaｓｃｒｉｐｔ循环排列的div元素（div）。谢谢您一直鼓励我。
设计素描 uff1a
分析图：
在上面的图片中：
布莱克：这是个外容器；
黄色：需要用椭圆移动的图片。
橙色：从每一个图片元素到容器顶部的距离。
紫色：长或短半径；
蓝色：从容器顶部到容器顶部的最大距离。
坐标轴；
白色：椭圆运动轨迹；
一、原理分析：
1.1椭圆运输
前两篇文章分析了圆形排列和圆周运动。在知道了这两个的安排和动作之后，我们应该再看看这个例子。
根据上一篇文章的分析，循环运动的公式如下：
$（这）。Css（{左：Math.sin（（AHD *指数+ ainhd））*半径+ dotleft，顶：Math.cos（（（AHD *指数+ ainhd））*半径+ dottop }）；
（如果这个公式不清楚，你可以看到它前面的运动）。
现在我们将被椭圆传送，但是我们能应用上面的公式吗
是的，但是…需要稍微改变一下。
椭圆和圆的区别是什么
它是一个半径；圆只有一个半径，椭圆有两个，一个长半径，一个很短的半径，如上面的图形中的OA和OB，紫色线段；
因此公式的半径需要用一个长半径和一个短半径来替换，其他的没有改变，如下所示：
$（这）。Css（{左：Math.sin（（AHD *指数+ ainhd））* + dotleft OB，顶：Math.cos（（（AHD *指数+ ainhd））* OA + dottop }）；
2.2安排的宽度和透明度的变化
排列在椭圆中的图片的宽度和透明度的变化规律是什么，或者它们的特点是什么
从容器顶部的距离；如上图所示，橙色线的长度。发现相同长度、高度和透明度应与运输期间相同长度的橙色线段相同长度。
因此，我们通过橙色线设置图片的宽度、高度和透明度。
这里的宽度和高度的变化，透明度是一个比例的变化，所以我们需要一个比例，这个比例是乘以图像的宽度和高度的1倍，图片是原来的大小，如果比例小于1，那么图片的宽度应该小于图片的正常大小。
如何得到这个比例值
线段的长度以橙色到蓝色，去掉线段的长度；因为蓝线的长度是橙色线的最大长度；所以，这个比值是在0到0之间的数目；也符合上述，同一条橙色线应该具有相同的长度、宽度、高度、透明度；
下面的公式是找出每幅图片在距离顶部的值，也就是上面图片中橙色线估计的长度。
（Math.cos（（（AHD *指数+ ainhd））* B + dottop）
下面的公式是找到关键的比例值allpers，这totpop在上图的蓝线的长度，橙色的最大值。
无功allpers =（Math.cos（（（AHD *指数+ ainhd））* B + dottop） / tottop；
因为比例是根据橙色线的长度。（蓝线，橙色线是固定的，值是运动的变化），所以用它来乘以宽度和高度，透明度就是我们可以达到相同的长度，橙色线的运动画面，应该有相同的宽度和高度，透明度。
因为最小值可能是0，所以我们必须用一个函数来处理：
无功wpers = math.max（0.1，allpers）；
无功hpers = math.max（0.1，allpers）；
美元（这个）。Css（{
宽度：wpers *呢，
高度：hpers *黑，
不透明度：allpers
}）；
2.3指标值
我们最近的图片的视觉距离，应该在顶部，对Z指数的绝对定位应该是最大的，而最小值，因为此值也与运动图像的变化，所以我们使用上述allpers率值，这个值是0-1之间，所以我们使用一个函数：
Math.ceil（allpers * 10），允许其值应介于1-10
（因为我们这里只有十张图片，如果更多的话，这个公式需要改变）。
三。完整的代码
$（函数（）{（））
/水平坐标中心
Var（dotleft = $（集装箱）（宽度）$（，点），宽度（ / 2-100））；
坐标中心
Var（dottop = $（集装箱）（的高度）$（，点），高度（ / 2-100））；
椭圆{长边}
a = 460；
椭圆的短边
b＝120；
的起点
VaR标准= 0；
每个框对应的角度；
VaR的AVD = 360 / $（。容器IMG）。长度；
每个框对应的弧度；
VaR和= AVD *数学。π/ 180；
移动速度
var速度= 2；
图像宽度和高度
VaR WID =（美元。集装箱集团）的Width（）；
黑= $（var。容器IMG）。Height（）；
顶部的总值
无功tottop = dottop + 100；
设置一个位置圆的中心
$（，点），Css（{左：dotleft，顶：dottop }）；
移动函数
无功fun_animat =函数（）{（）
速度=速度< 360speed：2；
传输速度
速度+ 2；
移动距离，即运动曲线数；
无功ainhd =速度*数学。π/ 180；
根据速度来确定div元素
$（。容器IMG）。每个（函数（指数、元）{）
无功allpers =（Math.cos（（（AHD *指数+ ainhd））* B + dottop） / tottop；
无功wpers = math.max（0.1，allpers）；
无功hpers = math.max（0.1，allpers）；
美元（这个）。Css（{
左：Math.sin（（AHD *指数+ ainhd））* + dotleft，
顶：Math.cos（（AHD *指数+ ainhd））* B + dottop，
Z：Math.ceil（allpers×10），
宽度：wpers *呢，
高度：hpers *黑，
不透明度：allpers
}）；
}）；
}
定时运动函数调用
无功setanimate = setInterval（fun_animat，100）；
}）
在明确了原理之后，代码量很少！~ ~
以上就是本文的全部内容。我们希望能帮助你。感兴趣的朋友可以看到基于Javaｓｃｒｉｐｔ的循环div元素（1）和根据Javaｓｃｒｉｐｔ循环排列的div元素（div）。谢谢您一直鼓励我。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。