Question

我正在尝试创建一个无限卷元素，并且没有找到足够轻量/足够能力的插件，所以我正在尝试创建自己的插件。

到目前为止，它正在游泳，除了动画中的轻微抽搐，当我删除第一个元素并将其附加到父元素的末尾。我抛出的例子也存在一个问题，即由于某些原因，元素会丢失填充，但这在我的实际代码中并没有发生......

使用示例标记：

<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()})
        });

Answer 1

如果您从padding: 3px移除#photos，则动画可以正常运行。

元素＆＃34;混蛋＆＃34;当我改变他们的订单时，回到右边

1 个答案: