Jquery 动态增加左属性

Jquery 动态增加左属性,jquery,html,css,Jquery,Html,Css,我制作了一个图像滑块,图像通过计算 image.pc = my.percentLandscape; image.style.left = xs - (image.pc / 2) / z * my.size +'px'; 我想增加图像之间的差距。如何动态计算左属性的值 我正在使用imageFlow 假设xs、image.pc、z和my.size都是数字您可以这样做,为什么要设置image左和右边距 在以下CSS类中添加边距: .imageflow img { margin: 0 30p

我制作了一个图像滑块,图像通过计算

image.pc = my.percentLandscape;
image.style.left =  xs - (image.pc / 2) / z * my.size +'px';
我想增加图像之间的差距。如何动态计算左属性的值

我正在使用imageFlow


假设xs、image.pc、z和my.size都是数字

您可以这样做,为什么要设置image
边距

在以下CSS类中添加边距:

.imageflow img {
    margin: 0 30px 0 30px; // Add this line in your CSS
}
你试过修改css吗

.imageflow img { margin: 0 50px;}
当我试图直接在那个网站上修改css时,这似乎奏效了

编辑

很抱歉,我上面的解决方案是错误的,我下载了插件并查看了详细信息。 因为每个图像都是绝对位置,并且位置是动态计算的,所以必须修改javascript以获得更多的空间

如果您的站点上传到了某个地方,那么我可以查看更多细节,但是从您可以从web站点下载的示例中,您可以在javascript中编辑以下代码

文件:imageflow.js

line: 583: image.style.left = xs - (image.pc / 2) / z * my.size + (50 * index) + 'px';
我补充说

(50 * index)
因此,每幅图像之间将有50多个像素

编辑2

由于我在第一次编辑中所做的更改,它将所有图像向右移动。 它只需要重新计算显示索引和隐藏索引

在第543行中,我添加了以下行

/* Main loop */
var firstImageIndex = -1;   <---------------------------------this one
for (var index = 0; index < my.max; index++)
else
{
   if (firstImageIndex < 0)  <---------------------------------this line
      firstImageIndex = index; <-------------------------------this line

   var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + 5);
   var xs = x / z * my.size + my.size;
让我知道,如果这是太混乱,或不工作,我会给你发送我编辑的javascript

祝你好运

编辑3 我做了一些修改,这些代码的位置与编辑2区域相同

First section
    /* Main loop */
    var firstImageIndex = -1;
    var scaleLevel = 5; // higher the number, it will scale it smaller
    var extraSpaceBetweenImage = 100; //extra Space Between Images measured by px
    var shiftLeftLevel = 4; // shift the for image element to the left,
第二节

if (firstImageIndex < 0)
     firstImageIndex = index;

var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + scaleLevel);

向现有计算中添加常量肯定可以吗?@ChrisMoutray尝试添加常量值。第二幅图像和第三幅图像之间的唯一差距是增加了。或者您应该详细解释您当前的计算(例如,xs代表什么),并提供更好的代码示例…@ChrisMoutray我使用了imageFlow代码,并进行了所有所需的更改。var z=(Math.sqrt(10000+x*x)+100)*my.imagesM;var xs=x/z*my.size+my.size;查看示例xStep属性似乎添加了一个gapi,尝试将其添加到我的css中,但它不起作用。您尝试修改的地方是哪里?对不起,我查看了项目,上面的解决方案是错误的,我将编辑上面的解决方案。做得好,您让我度过了美好的一天,非常感谢..我只是想修改一下知道你是怎么计算的吗?我花了两天的时间来计算这个…我只是用firebug,看看每个动画中都有什么变化,在这个例子中,css属性“left”正在改变以设置位置。所以我进入javascript并搜索“.left”我知道左属性需要更改,但您是如何更改公式??50*索引的?因为我尝试添加变量,但对设置每个图像的边距无效。
First section
    /* Main loop */
    var firstImageIndex = -1;
    var scaleLevel = 5; // higher the number, it will scale it smaller
    var extraSpaceBetweenImage = 100; //extra Space Between Images measured by px
    var shiftLeftLevel = 4; // shift the for image element to the left,
if (firstImageIndex < 0)
     firstImageIndex = index;

var z = (Math.sqrt(10000 + x * x) + 100) * (my.imagesM + scaleLevel);
image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (extraSpaceBetweenImage * (index - firstImageIndex - shiftLeftLevel)) + 'px';