0

我制作了图像滑块，通过计算将图像放置在其中

image.pc = my.percentLandscape;
image.style.left =  xs - (image.pc / 2) / z * my.size +'px';

我想增加图像之间的差距在此处输入图像描述。如何动态计算左属性的值。

我正在使用 imageFlow http://finnrudolph.de/ImageFlow/Introduction

4

3 回答 3

2

你试过修改css吗？

.imageflow img { margin: 0 50px;}

当我尝试直接在该网站上修改 css 时，这似乎有效

编辑

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

如果您将网站上传到某个地方，那么我可以查看更多详细信息，但是从您可以从网站下载的示例中，您可以在 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++)

然后在第 560 行，添加以下行

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;

然后在我们在Edit 1中编辑的那一行，将逻辑更改为以下

image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (10 * (index - firstImageIndex)) + 'px';

让我知道这是否太令人困惑或不起作用，我会将我编辑的 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);

第三节

image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (extraSpaceBetweenImage * (index - firstImageIndex - shiftLeftLevel)) + 'px';
于 2013-05-14T07:51:30.150 回答
-1

你可以这样做，为什么要设置图像left和right边距。

在以下 CSS 类中添加边距：

.imageflow img {
    margin: 0 30px 0 30px; // Add this line in your CSS
}
于 2013-05-14T07:50:06.827 回答
-1 
image.pc = my.percentLandscape;
image.style.left = (( (xs - (image.pc / 2)) / z) * my.size )+'px';

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

于 2013-05-14T05:18:09.970 回答