Question

我正在尝试使用插件创建一个封面流程，位于此处：http://vanderlee.github.io/coverflow/

我所要做的就是：

<div class="coverflow">
    <div class="cover">A</div>
    <div class="cover">B</div>
    ...
    <div class="cover">Y</div>
    <div class="cover">Z</div>
</div>

<script>
    $(function() {
        $('.coverflow').coverflow();
    });
</script>

这适用于手动创建的元素，但在执行以下操作时：

var el = {
    newDiv: $("<div>", { class: "cover newDiv"}),
    newElt: $("<div>", { class: "cover newDiv"})
}

$("#preview-coverflow").append(el.newDiv);
$("#preview-coverflow").append(el.newElt);

我的div以垂直方式显示，而不是水平显示。我的问题是两种元素创造形式之间是否存在差异？在这两种情况下，我（尝试）创建空div并附加到父级。我做错了吗？

在我的样式表中，只是为了看到我的空div：

.newDiv { 
    background-color:red
}

Answer 1

看起来像.coverflow（）需要在添加元素后运行。

在控制台中，动态添加html后，只需尝试运行

$('.coverflow').coverflow('refresh');

如果这似乎可以解决问题，那么请在添加新元素后再实现它。

没有注意到插件有一个刷新功能，使用刷新应解决它。

Answer 2

添加新元素后尝试使用refresh方法

$('.coverflow').coverflow('refresh');

来自文档：

<强>刷新

Redraw the covers. You shouldn't ever need to do this unless you are adding or removing 
covers or changing the covers yourself.

Answer 3

你走了：

<style>
    .newDiv {
        background: gold;
        position: absolute;
        width: 320px;
        height: 320px;
        overflow:hidden;
    }
</style>
<script>
    $(function() {
        $('.coverflow').coverflow();
        addNewTest();// test call here
    });

function addNewTest(){
    var el = {
        newDiv: $("<div>", { class: "cover newDiv"}),
        newElt: $("<div>", { class: "cover newDiv"})
    }

    $("#preview-coverflow").append(el.newDiv, el.newElt).coverflow('refresh');
}
</script>

Answer 4

尝试使用没有任何插件来动态创建元素。它纯粹的javascript和JQuery：

<script>

    var myDivs = ""; 

    for(var i=0; i <10; i++)
    {
        myDivs+= "<div class='cover'></div>";
    }

    $(".coverflow").html(myDivs);

<script>

我认为这清楚了你的概念。希望这有效。

动态创建HTML元素

4 个答案: