javascript - 在居中的图像上添加 div？

Question

我正在使用 ImageFlow SEE，一旦单击图像并滑入中心，我想在图像顶部添加 div。我尝试检查 js 文件，但MoveIT()函数在 js 中被调用了很多次，而我无法识别，

t.wrap('<div class="f1_card"></div>');

我什么时候应该写将 div 包裹在图像周围。

谢谢，

Answer 1

您可以使用 jquery 的 prepend() 函数。您只需要选择图像元素，然后调用 prepend 函数。请参阅示例：

$('.target_image').prepend('<div class="f1_card"></div>');

如果要在元素之前添加元素，则可以添加元素。但是如果你想用 div 包装一个元素，那么你必须使用 wrap() 函数。

$('.target_image').wrap('<div class="f1_card"></div>');

显然，您必须将此代码放在您想要的点击函数或类似事件中。看例子：

$('.target_image').on('click', function(){
   $(this).prepend('<div class="f1_card"></div>');
});

这里具有类“f1_card”的 div 将是 target_image 元素的父类。希望这会帮助你。

Answer 2

如果您正在使用动画功能，也许您可​​以尝试这样的事情。

$('.myimage').click(function () {
    $(this).animate({

    /*.do stuff...*/

    }, 'slow', function (){
       $(this).prepend('<div class="f1_card">my content here</div>');
    });
});

这工作如下。当您单击图像时，它将执行您的 jquery 动画。一旦执行了正确的动画，该函数将在目的地（在本例中为单击的 div）添加一个元素。根据 API 文档，这将“将由参数指定的内容插入到匹配元素集中每个元素的开头。 ”

Answer 3

您可以将 div 居中并在 css 中使用 z-index。