如何防止jquery的規模效應

http://jsfiddle.net/H3YHh/1 如何防止jquery的規模效應

我試圖在一個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應該比實際的圖像更寬。

來源

2014-05-12 Aoi

這是因爲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; 
}

來源

2014-05-12 04:59:32

我想保持在該中心，不是靠左對齊。 – Aoi

在css3中做它不能保證在舊瀏覽器上的兼容性，這就是爲什麼我使用jQuery。 – Aoi

你測試過嗎？導致在Firefox中，圖像仍然調整左邊對齊，然後跳轉到預期的中心。 – Aoi

只需卸下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; 
}

來源

2014-05-12 04:59:52

使用絕對定位不會將其放在父容器的中心。圍繞它是問題的全部，這就是我爲'step'函數編寫的內容。 – Aoi

那麼，怎麼樣的顯示：圖像塊？ –

顯示模塊幾乎最終會產生相同的效果，請在小提琴中嘗試一下。 – Aoi

-1

你需要計算的寬度和高度的父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

來源

2014-05-12 05:07:30

css3不允許，因爲我想保持與舊版瀏覽器的兼容性。 – Aoi

你想要從中心縮放圖像嗎？ –

是的！那麼它需要從其父母的中心縮放 – Aoi

如何防止jquery的規模效應

回答

相關問題