在故事中间动态添加图像

Question

我正在网站上显示一个故事，我想在故事中动态添加图像，我该怎么做？

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

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

Nullam nibh lorem，aliquam sed sodales sed，tortor 的 egestas。库拉比图尔 Commodo urna 非精英 scelerisque ac rutrum Tellus interdum。菜豆 狮子座，congue eu ultrices vitae, pulvinar vitae neque。暂时忧伤 eu eros aliquet in egestas metus 必比登。 Etiam eleifend 人生 威尼斯康塞特图尔 舌舌草。在哈克栖息地高原 格言。精英时代的努拉。 男性前庭 quis sodales。 Sed id tortor id odio mollis iaculis eu a sem。莫尔比 猥亵前的 pellentesque lorem vitae 坐在 amet pulvinar 洛雷姆门。莫里斯·泰普尔·拉奥里特 quam vel tristique。多内克乌特里斯 智人港，欧盟联盟 Tortor Rhoncus eget。空车 大尼斯。埃涅安康塞特图尔 劳雷特地方。现在的布兰迪特 quam turpis，非 egestas elit。基斯克 多洛尔·特皮斯，sollicitudin id elementum 坐在 amet，sodales 放在 metus。 Duis tortor neque, celerisque a adipiscing quis，平淡无奇。 多内克·马蒂斯 (Donec Mattis)，pharetra porta 的 nibh， Erat Massa tempor quam，亨德里特 sem nibh 坐 amet magna。 Sed 拍卖师 lectus ac magna accumsan 司令。南 车辆 velit et neque eleifend 坐 amet eleifend leo euismod。

Answer 1

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

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

观看现场演示：   jsbin.com/agimi5/3。

假设故事全部在

内。然后插入图像，说：

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