Question

我在div中有一个100 * 100的图像，我想像各种公司一样在div中移动图像。例如www.zazzle.com那样做。

我尝试了以下代码，但它正在推动所有其他div，div正在扩展。任何想法如何做到这一点。

 $item.animate({height: '+=5', width: '+=5'}, 'fast', function() {
  $item.animate({height: '-=10', width: '-=10'}, 'fast', function() {
    $item.animate({height: '+=5', width: '+=5'}, 'fast', function() {
      //animation finished
    });
  });
});

Answer 1

像www.zazzle.com

<div class="example">
   <img class="img-1" src="..." />
   <img class="img-2" src="..." />
</div>

.example{
    position: relative;
    overflow: hidden;
    width: 70px;
    height: 70px;
}
.img-1{
    position:absolute;
    width: 70px;
    height: 70px;
}
.img-2{
    position:absolute;
    width: 140px;
    height: 140px;
    left: -50%;
    top: -50%;
    display: none;
}

$(function(){
    var example = $('.example');
    var img1 = example.find('.img-1');
    var img2 = example.find('.img-2');
    example.hover(
        function(){ 
            img1.animate(
                    {height: '140', width: '140', left: '-50%', top: '-50%'},
                    'fast',
                    function(){
                        $(this).hide();
                        img2.show();
                    }
                );
        },
        function(){
            img2.hide();
            img1.css({height: '70px', width: '70px', left: 0, top: 0}).show();
        }
    );
    //and the next code fore moving image
});

第二种方式是使用单张图像（但我们在图片质量上有所损失）

Answer 2

确保将图片位置设置为absolute并使用值较高的z-index属性，例如100以及top和left属性。这将使图像显示在其他元素上，并使其不会推动其他元素/ div。

如何在div标签内移动图像

2 个答案: