增加Left属性动态 [英] increase Left property dynamicaly

问题描述

我已通过计算

制作了放置图像的图像滑块。

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

我想增加图像之间的间隙。如何动态计算left属性的值。

我使用imageFlow http://finnrudolph.de/ImageFlow/简介

解决方案

您尝试修改css？

  .imageflow img {margin：0 50px;} 
  
 
 
 
这似乎在我试图直接在网站上修改css时起作用 
 
 
 
 EDIT 
 
 
 
对不起，我的解决方案是错误的，我下载了插件并查看详细信息。 
因为每个图像是绝对的位置和位置是动态计算的，你必须修改javascript以拥有更多的空间。
 
 
 
如果你的网站上传到某个地方，然后我可以查看更多的细节，但从您可以从网站下载的示例，您可以编辑javascript 
 
 
 
文件中的以下代码：imageflow.js 
  line：583：image.style.left = xs  - （image.pc / 2）/ z * my.size + index）+'px'; 
  
我添加了
 （50 * index）
  
图片。
 
 
 
 编辑2  
 
 
 
编辑，它已经将所有的图像向右移。 
只需要重新计算显示的索引与隐藏索引。
 
 
 
在第543行，我添加了以下行
  / *主循环* / 
 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; 
  
然后在我们在编辑1中编辑的行上，将逻辑更改为以下
  image.style.left = xs  - （image.pc / 2）/ z *（my.size  -  50）+（10 * firstImageIndex））+'px'; 
  
让我知道，如果这太混乱，或不工作，我会送你
 
 
 
祝你好运
 
 
 
 编辑3  
我已经做了一些修改，这些代码的位置与编辑2区域相同。
 第一节
 / *主循环* / 
 var firstImageIndex = -1; 
 var scaleLevel = 5; //更高的数字，它会缩放更小
 var extraSpaceBetweenImage = 100; //通过px测量的图像之间的额外空间
 var shiftLeftLevel = 4; //将图片元素向左移动，
  
第二部分
  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'; 
  
 
i have made image slider in which images are placed by calculating 
image.pc = my.percentLandscape;
image.style.left =  xs - (image.pc / 2) / z * my.size +'px';
i want to increase the Gap between images . how to dynamically calculate value for left property.

i am using imageFlow http://finnrudolph.de/ImageFlow/Introduction 
解决方案

have you tried modifying the css?
.imageflow img { margin: 0 50px;}
This seems to worked when i tried to modify the css directly on that website

EDIT

Sorry my solution above was wrong, I downloaded the plug-in and looked in details.
Because each images are absolute position and position is dynamically calculated, you have to modify the javascript to have more spaces.

If you have your site uploaded somewhere, then i can look into more details but from the sample you can download from the web site, you can edit following code in the javascript

file: imageflow.js
line: 583: image.style.left = xs - (image.pc / 2) / z * my.size + (50 * index) + 'px';
I've added
(50 * index)
so it will have 50 more pixels between each images.

EDIT 2

because of the changes i made in my first Edit, it has shifted all the image to the right.
It just need re-calculate the displayed index vs hidden index.

in line 543, i added following line
/* Main loop */
var firstImageIndex = -1;   <---------------------------------this one
for (var index = 0; index < my.max; index++)
Then in line 560, added following line
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;
Then on the line we edited in Edit 1, change the logic to following
image.style.left = xs - (image.pc / 2) / z * (my.size - 50) + (10 * (index - firstImageIndex)) + 'px';
Let me know if this is too confusing, or doesn't work, i'll send you the javascript that i edited.

Good luck

Edit 3
I've made few modification, location of these codes are same as the Edit 2 area.
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,
2nd section
if (firstImageIndex < 0)
     firstImageIndex = index;

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


                        
这篇关于增加Left属性动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！