Question

希望所有熟悉jQuery Reel插件的人都能为我提供帮助。

我有一个动态加载图像的表，在这些图像上有一个onclick函数，该函数应该将卷轴图像更改为相应的单元格项。 Sprite不会更改为默认的硬编码。

我模糊地理解，我必须使用"reel"类来初始化动态图像，但是添加属性class="reel"并没有任何作用。

还有另一个问题要问 the same thing

-但是我不了解jQuery，也不知道如何将答案应用于我自己的项目。

function previewIt(item) {
    var reel = document.getElementById("previewReel");
    reel.dataset.image = item.id + "sprite.png";
}

function headCatalogLoader() {
    var table = document.getElementById("headCatalog");
    var img = 2;
    var uID = 8;

    for (var i = 0; i <= 2; i++) {
        var row = table.insertRow(i);

        for (var k = 0; k <= 2; k++) {		// 2 is because 3 columns
            var skinTone = "none";
            var cell = row.insertCell(k);

            if (k == 0) {
                skinTone = "lgt";
            }
            else if (k == 1) {
                skinTone = "med";
            }
            else if (k == 2) {
                skinTone = "drk";
            }

            cell.innerHTML = "<img src=\"headimgs/head" + skinTone + img + ".png\" id=\"head" + uID + skinTone + "\" onclick=\"previewIt(this)\" class=\"reel\">";

            uID--;
        }
        img--;
    }
}

<script src="http://test.vostrel.net/jquery.reel/jquery.reel.js" type="text/javascript"></script>
<div id="headPreview">
    <img src="head1med.png" height="800"
            id="previewReel"
            class="reel"
            data-image="head1medsprite.png"
            data-frames="8"
            data-footage="4">
</div>

如果代码使您畏缩，我深表歉意。如果有可能，我只想用JavaScript来做，如果没有，那么简单的解释将对我有帮助。谢谢你的朋友。

Answer 1

要求：

您有一张桌子，可以动态显示图像
当用户id="previewReel"来自动态加载的图像时，您只想在图像click上应用卷轴

解决方案：


您需要更改主映像#previewReel reel映像运行时。

$("#previewReel").reel("image", $(item).attr('src'));

检查以下内容：

headCatalogLoader();

function headCatalogLoader() {
    var table = document.getElementById("headCatalog");
    var img = 2;
    var uID = 8;

    for (var i = 0; i <= 2; i++) {
        var row = table.insertRow(i);

        for (var k = 0; k <= 2; k++) {		// 2 is because 3 columns
            var skinTone = "none";
            var cell = row.insertCell(k);

            if (k == 0) {
                skinTone = "lgt";
            }
            else if (k == 1) {
                skinTone = "med";
            }
            else if (k == 2) {
                skinTone = "drk";
            }

            cell.innerHTML = "<img src=\"https://picsum.photos/200/200/?image=65" + uID + "\" id=\"head" + uID + skinTone + "\" onclick=\"previewIt(this)\"  \>";

            uID--;
        }
        img--;
    }
}

function previewIt(item) {
    $("#previewReel").reel("image", $(item).attr('src')); ///this line will apply new reel 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.vostrel.cz/jquery.reel.js" type="text/javascript"></script>

<div id="headPreview">
    <img src="https://picsum.photos/200/200"  width="210" height="186"
            id="previewReel"
            class="reel"
            data-image="https://picsum.photos/200/200"
            data-frames="8"
            data-footage="4"
            data-revolution="800"
            />

</div>

<br><br>
<ul>
<li>Runtime table image loaded:</li>
<li>Click on any image, to load its reel effect above</li>
</ul>
<table id="headCatalog"></table>

jQuery Reel插件动态加载卷轴图像

1 个答案: