Question

好吧，所以这就是我的困惑：我有一个DIV的图像块，形成了一个画廊的选择器。图像按照一系列连接的URL组织，并且尺寸不一致（可以使用档案照片！）。 180张图片。当用户使用一对按钮滚动它时动画DIV移动，而不是问题。但是，有没有办法以数学方式计算从包含DIV中的起始（最左侧）位置的第一个图像到包含DIV最右侧位置的最终图像的动画总量？

在任何给定时间动画的数量是通过单个图像的宽度计算的;但是当我把图像的总宽度相加时，我得到2864px。当我计算动画（手动）从开头到结尾移动的总量时，我得到16892px。

HTML的相关部分在这里：

<div id="galleryContainer" class="shadow-normal" style="overflow: hidden;">
    <div id="selectorContainer" style="overflow: visible;">
        <div id="picSelector" style="position: relative; white-space: nowrap;">
            <script>
                var galleryString = "";
                for (i=0;i<totalPics;i++) {
                    newImg = '<img src="' + picArray[i] + '" id="' + i.toString() + '" onclick="setImage(this)" class="img-rounded img-responsive img-thumbnail" alt="Gallery Image" style="height: 80px; margin: 3px; display: inline; background-color: white;" >';
                    galleryString = galleryString + newImg;
                };
                $('#picSelector').html(galleryString);  
            </script>   
        </div>
    </div>
</div>

生成2864px计算的doc.ready语句位于：

$(document).ready(function () {
    var imgSrc = picArray[0];
    var imgCaption = "Picture 1" + " of " + totalPics.toString();
    $('#picForID').attr("src",imgSrc);
    $('.caption').text(imgCaption);
    $('#0').css({'box-shadow':'5px 5px 2px #888888','background-color':'wheat'});
    // $('#galleryContainer').css('overflow','hidden');
    var totalWidth = 0 + $('#179').position().left + $('#179').width();
    $('#displayCalcs').text(totalWidth.toString());
});

jQuery计算动画金额

0 个答案: