Question

我在网站上展示故事，我想在故事中动态添加图片，我该怎么做？

我不想在故事的开头或故事的结尾处添加它，而是将它动态地嵌入到故事中间的某处，向左或向右浮动。

我正在使用PHP和jQuery，故事中也可能包含HTML。如果我有这样的故事，我该如何嵌入图像？

Nullam nibh lorem，aliquam sed sodales sed，ecgestas在tortor。 Curabitur commodo urna non elit scelerisque ac rutrum tellus interdum。 Phasellus arcu leo，congue eu ultrices vitae， pulvinar vitae neque。 Sed tempor dolor eu eros aliquet in egestas metus 必比登。 Etiam eleifend tellus vitae purus consectetur eget venenatis ligula cursus。在hac habitasse platea dictumst。 Nulla在elit erat。 Vestibulum mattis malesuada sapien quis sodales。 Sed id tortor id odio mollis iaculis eu a sem。 Morbi pellentesque lorem vitae ante molestie <img src="pathtoimage" style="float:left;"> 坐下来 Lorem porta。 Mauris tempor laoreet quam vel tristique。 Donec ultrices porttitor sapien，eu consectetur tortor rhoncus eget。 Nulla vehicula 麦格纳尼斯。 Aenean consectetur placerat laoreet。 Praesent blandit quam turpis，非egestas elit。 Quisque dolor turpis，sollicitudin id 元素坐下来，在metus sodales。 Duis tortor neque，scelerisque a adipiscing quis，blandit non velit。 Donec mattis，在pharetra porta的nibh，在hendrerit，erat massa tempor quam sem nibh坐在amet magna。 Sed auctor lectus ac magna accumsan commodo。南 vehicula velit et neque eleifend sit amet eleifend leo euismod。

Answer 1

由于故事可以包含HTML，问题可能会变得非常混乱。以下算法将在故事中插入任意百分比的图像，并确保它不在HTML标记内。请注意，它牺牲了效率，直截了当。

警告：此代码仍然可以将图片代码插入其不属于的位置，具体取决于故事允许的HTML。例如，如果允许内联script标记¹，则算法可能具有“有趣”效果。 ;）

See the live demo at: jsbin.com/agimi5/3

假设，故事全部在<div id="StoryGoesHere">内。然后插入图像，例如：

InsertImageInStory ("StoryGoesHere", 30, "F_left", "Image URL");

假设：

function InsertImageInStory (ContainID, PercentIn, LeftorRightClass, ImageURL)
{
    var storyContainer  = $("#" + ContainID);
    var storyHTML       = storyContainer.html ();
    var storyLen        = storyHTML.length;
    var targetCharPos   = (storyLen * PercentIn) / 100;

    /*--- Now Loop through the story until we reach the target character, WHILE
        making sure it isn't inside an HTML tag.
    */
    for (var J = 0, bInTag = false;  J < storyLen;  ++J)
    {
        if (storyHTML.charAt(J) == '<'  ||  storyHTML.charAt(J) == '>' )
            bInTag              ^= true;    //-- Toggle value.

        if (J < targetCharPos)  continue;

        /*--- We've found/passed the target position.  Insert the image just as soon
            as we are clear of any tags.
        */
        if (!bInTag)
        {
            var newStory    = storyHTML.substr (0, J+1);
            newStory       += '<img src="' + ImageURL + '" class="' + LeftorRightClass + '">';
            newStory       += storyHTML.substr (J+1, storyLen+1);

            storyContainer.html (newStory);
            break;
        }
    }
}

如果你喜欢在服务器端进行操作，可以很容易地将算法转换为PHP。

¹如果允许使用内联script标记，那么无论如何都会遇到更大的问题。

Answer 2

在故事的中间故事中给出一个隐藏的div ...然后尝试这个....

Html:  <div id="divid" float="left">


setTimeout(function() {$("#divid").append('<img src='img.gif'>').show()}, 10000);

在故事中间动态添加图像

2 个答案: