Question

我制作了一个图像滑块。点击图片后，我正在动态创建带有一些文字的div。在图片的onClick事件中，我向图片添加了div，然后图片被翻转，div应该可见。但是图像出现在页面的右侧。如何赋予它与图像位置相同的位置？

此代码我用于创建div，然后向其添加图片：

function flipIt(obj){
    //$(obj).wrap("<div class='centerImage'></div>")

    console.log("value before Function status   "+status);

    $(obj).wrap($('<div class="foobar"/>').css({
        "position" : "absolute",
        "left"     : $(obj).position().left,
        "top"      : $(obj).position().top,
        "height"   :$(obj).height(),
        "width"    :$(obj).width(),
    }));
    $
    alert('classes ..'+$(obj).hasClass("foobar").toString());
    $(obj).animate({"left": "-=40px","opacity": "0.65"},"slow");
    $(obj).animate({"height":"600px","width":"320px"},30);

    $(obj).css("-webkit-backface-visibility","hidden");
    $(obj).css("-webkit-transform-style","preserve-3d");
    $(obj).css("-webkit-transition","all 1.0s linear");
    $(obj).css("transform-style","preserve-3d");
    $(obj).css("transition","all 1.0s linear");

    $(obj).css("-webkit-transform","rotateY(180deg)");
    $(obj).css("transform","rotateY(180deg)");
    //$(obj).css("box-shadow","-5px 5px 5px #aaa");

    status=0;
    console.log("after if value set status   "+status);
}

.foobar div的CSS属性：

.foobar
{
    -webkit-backface-visibility:visible;
    position:absolute;
    color:red;
    background-color: red;
    background:red;
    content: div is here;
    height:450px;
    width:250px;
}

如何将div置于所选img的位置？

Answer 1

$("#id").html("<div class='foobar'>This is div</div>")
给出图像存在的div的id名称

Answer 2

试试这段代码：

 $("#id").wrap('<div class="foobar"/>');

See Demo

在图像的相同位置创建div

2 个答案: