0

我正在尝试创建一个无限滚动的元素，但还没有找到足够轻量级/足够强大的插件，所以我正在尝试创建自己的。

到目前为止，它运行良好，除了当我删除第一个元素并将其附加到父元素的末尾时动画中的轻微抖动。我抛出的示例也有一个问题，即由于某种原因元素丢失了填充，但这在我的实际代码中没有发生......

小提琴：http: //jsfiddle.net/WtFWy/

使用示例标记：

<section id="photos" class="bg-transparent-black">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</section>​

#photos{
    position:absolute;
    bottom:1em;
    width:100px;
    height:225px;
    padding:3px;
    overflow:hidden;
    white-space:nowrap;
}
#photos div{
    height:100%;
    width:50px;
    padding:3px;
    display:inline-block;
    position:relative;
    border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}

​和 JavaScript：

scrollImages = function(){
                var photoArea = $('#photos');
                var children = photoArea.children();
                var firstChild = $(children[0])
                var firstOffset=firstChild.offset();
                if(document.elementLeft === false){
                    document.elementLeft = firstOffset.left;
                }
                if(document.elementWidth === false){
                    document.elementWidth=firstChild.outerWidth(true);
                }
                if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
                    photoArea.append(firstChild);
                    firstChild.css('margin-left', 0 + 'px')
                    children = photoArea.children();
                    firstChild = $(children[0])
                    firstOffset=firstChild.offset();
                    document.elementLeft = firstOffset.left;
                    document.elementWidth=firstChild.outerWidth(true);
                }else{

                }
                document.elementLeft -= 1;
                firstChild.css('margin-left', document.elementLeft + 'px');
                t = setTimeout(scrollImages, 100);

            }
            document.elementLeft = false;
            document.elementWidth = false;
            var t = setTimeout(scrollImages, 500);
            $('#photos').mouseover(function(){clearTimeout(t)});
            $('#photos').mouseout(function(){scrollImages()})
        });

​</p>

4

1 回答 1

2

如果您padding: 3px从#photos动画中删除，则可以正常工作。

于 2012-05-01T20:04:02.647 回答