基于javascript按圆圈排列DIV元素(3)

$(这个)。CSS({ ' left ' : ath . sin((ahd * index ainhd))* radius DotLeft，' top ' : ath . cos((ahd * index ainhd))* radius DotOp })；

渲染：

分析图：

在上图中：

黑色：是外容器；

黄色：是需要按照椭圆移动的图片

橙色：从每个像素到容器顶部的距离

紫色：长半径或短半径；

蓝色：图片和容器顶部之间的最大距离

绿色：坐标轴；

白色：椭圆运动轨迹；

一、原理分析：

1.1根据椭圆运输

前两篇文章分析了“循环排列”和“循环运动”。了解了这两者之后，我们应该有了看这个例子的基础。

根据前面文章的分析，循环运输的公式如下：

$(这个)。CSS({ ' left ' : ath . sin((ahd * index ainhd))* radius DotLeft，' top ' : ath . cos((ahd * index ainhd))* radius DotOp })；

(如果不太清楚这个公式，可以看看之前的文章《运动》)；

现在我们要按照椭圆来运输。我们可以应用上面的公式吗？

是的，但是.它需要一点改变。

椭圆和圆有什么区别？

是半径；圆只有一个半径，而椭圆有两个，一个长半径一个短半径，比如上图中的OA和OB，紫色线段；

所以公式中的半径需要换成长半径和短半径；没有其他变化，如下所示：

$(这个)。CSS({ ' left ' : ath . sin((ahd * index ainhd))* OB dot left，' top ' : ath . cos((ahd * index ainhd))* OA dotTop })；

2.2排列过程中宽度和透明度的变化

椭圆排列图片的宽度和透明度变化有什么规律或特点？

是距容器顶部的距离；在上图中，橙色线段的长度。通过观察发现，相同长度的橙色线段的图片，在运输过程中应该具有相同的宽度、高度和透明度。

然后我们会通过这条橙色线段来设置图片的宽度、高度和透明度；

这里的宽度、高度和透明度的变化是成比例的变化，所以我们需要一个成比例的值。当比例值为1时，乘以图片的宽度和高度，即为图片的原始大小。如果比例值小于1，图片的宽度应该小于正常大小。

如何得到这个比例值？

用橙色线段的长度去掉蓝色线段的长度；因为蓝色线段的长度是橙色线段的最大长度；所以这个比例值是一个介于0和1之间的数字；同时，它也满足了上面提到的，同样的橙线长度应该有同样的宽度、高度和透明度；

下面的公式是求每张图片顶部的距离值，即上图中橙色线的估计长度；

(math . cos((ahd * index ainhd))* b Dottop)

下面的公式就是求这个关键比例值allpers，这个totpop就是上图中蓝线的长度，也就是橙色的最大长度

var all pers=(Math . cos((ahd * index ainhd))* b Dottop)/ToToP；

因为这个比例值是基于橙色线段的长度。(蓝色线段的值是固定的，橙色线段的值在运动中是变化的)，所以可以通过乘以宽度、高度和透明度来实现。在运动中，“相同长度的橙色线段的图片应该具有相同的宽度、高度和透明度。”

因为最小值可能是0.000，所以应该使用函数来处理以下情况：

var wpers=Math.max(0.1，all pers)；var hpers=Math.max(0.1，all pers)；

$(这个)。css({ 'width':wpers*wid，' height':hpers*hei，' opacity ' : all pers })；

2.3指数值

视觉上最近的图片应该在顶层，也就是绝对定位的z-index应该是最大的，反之亦然，因为这个值也会随着图片的移动而变化，所以我们使用上面的allpers ratio值，这个值在0到1之间，所以我们再用一个函数来处理一下：

Math.ceil(allpers*10)，让它的值介于1和10之间

(因为我们这里正好有十张图片，如果多的话，这个公式需要改一下。)

第三，完整的代码

$(function(){ //中心点横坐标var dotLeft=($(').容器')。width()-$(' .点')。width())/2-100；//中心点纵坐标var dotTop=($(').容器')。高度()-美元(' .点')。高度())/2-100;//椭圆长边a=460/椭圆短边b=120/起始角度var star=0；//每一个包厢对应的角度；var avd=360/$(' .容器img ').长度；//每一个包厢对应的弧度；var ahd=avd *数学/180；//运动的速度变化速度=2;//图片的宽高var wid=$(' .容器img ').宽度();var hei=$(' .容器img ').高度();//总的顶端值var ToToToP=Dottop 100//设置圆的中心点的位置$('.点')。CSS({ ' left ' : dottleft，' top ' : dottop })；//运动函数var fun _ animat=function(){ speed=speed 360？速度：2;//运运的速度速度=2;//运动距离，即运动的弧度数；var ainhd=速度*数学/180；//按速度来定位差异元素$('.容器img ').每个（函数(索引，元素){ var all pers=(数学。cos((ahd * index ainhd))* b Dottop)/ToToToop；var wpers=Math.max(0.1，所有persvar hpers=Math.max(0.1，所有pers$(这个)。CSS({ '左' :数学。sin((ahd * index ainhd))*左边一个点，‘top’:数学。cos((ahd * index ainhd))* b dotTop，' z-index ' : math。天花板(所有人* 10)，“宽度”:wpers*wid，“高度”: hpers * hei不透明度： all pers })；});} //定时调用运动函数var set animate=set interval(fun _ animate，100)；}) 弄清原理后，代码量其实很少！~~

以上就是本文的全部内容，希望对大家有所帮助，有兴趣的朋友可以看下《基于javascript实现按圆形排列DIV元素(一)》 和《基于javascript实现按圆形排列DIV元素(二)》 谢谢对我们的支持！