如何使用jQuery .each()将元素定位为曲线 [英] How to position elements as a curve with jQuery .each()

问题描述

这是一个有点不寻常的请求，因为我知道那里有一些插件可以沿贝塞尔曲线定位元素，但是由于种种我不愿讨论的原因，这些方法不适用于此应用程序.

This is a slightly unusual request as I know there are plugins out there to position elements along a bezier curve, however for a variety of reasons that I won't go into, these methods are not applicable for this application.

我需要使用jQuery每个函数遍历一组元素，并模拟一条曲线，该曲线从底部到顶部向左弯曲.

I need to iterate through a set of elements using the jQuery each function and emulate a curve that curves to the left, from bottom to top.

就像这样:-

  O
 O
O
O
O
 O
  O

我需要使用.size()将元素的数量存储在变量中

I need store the number of elements in a variable using .size()

然后根据该元素的索引，根据该数字执行计算以得出css left属性.

And from this number perform a calculation to work out the css left property, dependant upon the index of the element.

不幸的是，数学并不是我的强项，我一直坚持使用公式，以及如何使用jQuery .each()遍历元素并将css更改应用于每个元素.

Math is unfotunately not my strong point and I am stuck on the formula to use, and how I would go about iterating through the elements using jQuery .each() and apply the css changes to each element.

元素数将动态变化，这就是为什么在公式中需要同时包含元素数和每个元素的索引的原因.

The number of elements will be changing dynamically which is why the both the number of the elements and the index of each element will need to be included in the formula.

任何人都可以给我至少一个起点，让我了解如何在jQuery中进行编码吗? (或在jqueryUI中使用排名插件)

Can anyone give me at least a starting point as to how I would go aboout coding this in jQuery? (or using the position addon in jqueryUI)

推荐答案

那有点复杂.但是您需要确保所有元素都具有位置:

Thats a bit complicated. but you need to make sure all the elements have a position:

relative，absolute或fixed以便将其定位.

类似这样的内容: http://jsfiddle.net/maniator/PPRKF/

这篇关于如何使用jQuery .each()将元素定位为曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！