Question

说我有这个布局：

<div class='layout_theme'>
  <a class='icon'>
    <img class='example_one'>
</div>

<div class=layout_theme>
  <a class='icon'>
    <img class='example_two'>
</div>

<div class='file_uploader'>
  <sample code...>
</div>

我的想法是当我点击img＆＃39; example_one＆＃39;，＆＃39; .file_uploader＆＃39; div在它下面移动。如果我有10个div与class＆＃39; layout_theme＆＃39;同样的想法将适用。基本上，你单击该div中的img，文件上传就会弹出它。

这可能吗？

Answer 1

你可以这样做：

$(".layout_theme").click(function(){

    $(".file_uploader").animate({
        left: $(this).offset().left - parseInt($(this).css("margin-left")) + "px",
        top: $(this).offset().top + $(this).height() - parseInt($(this).css("margin-top")) + "px"
    }) 
});

在此处查看：http://jsfiddle.net/zd78e8a3/1/

Answer 2

这是一个简单的方法http://jsfiddle.net/xuatted6/

    $('.layout_theme').on('click', function(){
        var offset = $(this).offset();
        $('.file_uploader').animate({top: offset.top + 20}, 500, function(){
            $(this).fadeIn();
        });
    });

你可以玩效果：）

单击时移动div

2 个答案: