在居中的图片上方添加div？

Question

我正在使用ImageFlow 查看，希望在图片被点击并滑动到中心时，在图片顶部添加div。我尝试检查js文件，但MoveIT()函数在js中被调用了很多次，我无法识别。

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

何时应该在图像周围编写包装 div。

谢谢，

- KhAn SaAb

Answer 1

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

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

如果你想在一个元素前添加另一个元素，那么使用add()函数就可以了。但是如果你想用一个div将一个元素包裹起来，则需要使用wrap()函数。

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

显然，您需要将此代码放在点击函数或类似事件之上。请参考以下示例：

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

这里，class为“f1_card”的div元素将成为你的目标图像元素的父级元素。希望这能对你有所帮助。

- Md. Mahbubul Haque

Answer 2

如果您正在使用动画函数，也许可以尝试类似这样的方法。

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

    /*.do stuff...*/

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

这是如何工作的。当您单击图像时，它将执行您的jquery动画。一旦正确的动画已经执行，函数将在目标处（在这种情况下，点击的div）前置一个元素。根据API文档，这将“在匹配元素集的每个元素的开头插入由参数指定的内容。”

- lindsay

Answer 3

你可以在CSS中居中div并使用z-index。

- Supermath101