Question

我有一个免费的jQuery图片库，我正在尝试进行一些修改，以使其适合我的项目。

画廊是一个带图像的旋转圈。

圆的半径以这种方式定义：

radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );

然而，我需要的是根据viewportwidth（vw）

创建一个新的半径

任何人都可以帮我解决这个问题吗？

如果有人帮我理解上述代码中发生的事情，我将非常感激。

以下是该行代码的上下文：

w = $(window);
container = $( '#contentContainer' );
carousel = $( '#carouselContainer' );
item = $( '.carouselItem' );
itemLength = $( '.carouselItem' ).length;
fps = $('#fps');
rY = 360 / itemLength;
radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );

https://jsfiddle.net/mxp5svjx/

这是根据要求提供的照片：

主要问题是当我调整窗口大小时，圆的半径保持不变。

这是一个有效的演示： http://codepen.io/johnblazek/full/nceyw/

Answer 1

我可能错了，但我认为

Math.tan( Math.PI / itemLength )

计算每个线段的角度，itemLength的值越大，角度越小。所有项目都需要适合圈子。 tan函数根据角度值生成一个值。

然后将250除以前一个结果。我想用vw交换250会导致值过高。如果你知道viewwidth它看起来不错，那么你可以尝试类似的东西：

radius = Math.round( (250 * (vw/default_vw) ) / Math.tan( Math.PI / itemLength ) );

Answer 2

我发现密钥是250. 250是1920的13.02％，假设你有一个1920px宽度的窗口，我这样做。所以我发现我需要13.02％的窗口宽度。

我通过这样做获得了这个：

radius = Math.round10( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );

Math.round10(); // rounds to the nearest decimal. 
$(window).width(); // is the width of the window. In my case 1920px
0.1302 is 13.02% // when you multiply it with something.

最终结果是我获得了一个基于13.02vw的半径

根据viewportwidth（vw）创建圆半径

2 个答案: