我制作了图像 slider ,通过计算在其中放置图像
image.pc = my.percentLandscape;
image.style.left = xs - (image.pc / 2) / z * my.size +'px';
我想增加图像之间的间隙 .如何动态计算左属性的值。
我正在使用 imageFlow http://finnrudolph.de/ImageFlow/Introduction
最佳答案
<罢工> 你试过修改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 我做了一些修改,这些代码的位置与Edit 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';
关于jquery - 动态增加 Left 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16535593/