在居中图像上添加div？

Question

我正在使用ImageFlow SEE我想在图像上方添加div，一旦图像被点击并滑入中心。 我试过检查js文件，但是在js和m无法识别的情况下多次调用MoveIT()函数，

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。