Question

我正在尝试在div的中心放大图像。但是在缩放后图像基本上会跳到中心位置。 HTML：

<div>
    <img src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png"/>
</div>

的CSS：

div{
    width:400px;
    text-align:center;
}

JS：

$('img').hide().show('scale',{step:function(){
    var el = $(this);
    el.css({
        'top':((el.parent().height() - el.outerHeight())/2),
        'left':((el.parent().width() - el.outerWidth())/2)
    });
}},5000);

编辑：也许我在问题中并不清楚，但我希望将图像始终保持在div的中心，即动画期间和之后。是的，div应该比实际图像宽。

Answer 1

这是因为img元素默认为inline。因此，属性text-align:center将其置于父div元素的中间。您可以将text-align更改为left。

Updated Example

div {
    width:400px;
    text-align:left;
}

或者，将img元素的显示更改为block，以防止text-align对其产生影响。

Updated Example

img {
    display:block;
}

值得注意的是，您可以使用纯CSS创建此动画：

Example Here - 请参阅供应商前缀的示例。

div {
    width:400px;
    text-align:left;
    animation:scale 6s forwards;
}

@keyframes scale {
    0% {
        transform:scale(.1);
    }
    100% {
        transform:scale(1);
    }
}

修改：如果您希望img元素在整个时间内居中，只需将显示更改为block，然后添加margin:0 auto。

Updated Example

div {
    width:400px;
}
img {
    display:block;
    margin:0 auto;
}

Answer 2

只需删除css即可正常使用：

http://jsfiddle.net/H3YHh/2/

否则在你的jquery代码之后，css效果text-align: center将生效。

或者，在不删除css的情况下使用图像的绝对位置，以便从jquery开始左上方位置：

http://jsfiddle.net/H3YHh/5/

div{
    width:400px;
    text-align:center;
}
div img{
    position: absolute;
}

Answer 3

你需要计算父div的宽度和高度，然后通过从Javascript计算它来设置图像的中心，它不需要CSS3。

var s=1;
var ints = setInterval(draw,80);
var dW = $('div').width()/2;
var dH = $('div').height()/2;
 $('img').css({'left':dW+'px','top':dH+'px'});
function draw(){
    s+=2;
    var w = $('img').width()/2;
    var h = $('img').height()/2;
    $('img').css({'width':s+'px','margin-left':-w+'px','margin-top':-h+'px'});
    if(s>=200){
        clearInterval(ints);
    }
}

Jsfiddle

如何在jquery缩放效果后防止图像跳跃

3 个答案: