在另一个图像上方显示图像

时间:2014-03-21 06:51:13

标签: jquery css jquery-ui css3

我有一个背景图片,我想要执行的功能是,当点击一个按钮时,在背景图像上方添加第二个图像。通过单击我的代码但不在背景图像上方添加图像。此外,我的图片是可拖动的,如果我提到divwidth

,我想在height内进行此拖动

为了更好的解释,代码来了:

jsfiddle.net

$(document).ready(function(){
    $("button").click(function(){
       $("#currentimage").after('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />');
        $("#dragable").draggable()

    });    
});

3 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
    $("button").click(function(){
       $("#currentimage").appendTo('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />');
        $("#dragable").draggable()
    });    
});

您可以使用.appendTo();

答案 1 :(得分:0)

试试这个:

HTML:

<div id="draggable" style="display:none;">  
  <img src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" /> 
</div>

Jquery:

$(document).ready(function(){
   $("button").click(function(){
    var position =  $("#currentimage").offset();
     height = $("#currentimage" ).height();  
    //width = $("#currentimage" ).width();
     $("#dragable").css({ "display" : "block" , 'height':height, position : "absolute", "z-index" :"101", "background-color" : "#009ddf","opacity" : "0.9" } );  
    $("#dragable").offset($("#currentimage" ).offset());
    $("#dragable").draggable();
    });    
});

单击图像时,它将获取当前图像偏移并覆盖下一个图像。

答案 2 :(得分:0)

试试这个:

$(document).ready(function(){
    $("button").click(function(){
       $("#currentimage").html('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />'+"<br /><img src=\"http://s25.postimg.org/v554s2umn/man_looking_at_sunset.jpg\" width=\"200px\" style=\"height: auto; z-index: 0;\"/>");
        $("#dragable").draggable()

    });    
});