爲了獲得更好的結果,你必須使用CSS屬性類似:
#container{
overflow:hidden;
width:489px;
height:178px;
position:relative;
}
#container img{
position:relative;
margin:auto;
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
}
#container img.zoom {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
-ms-transform: scale(2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=2, M12=-0, M21=0, M22=2);
}
和javascript:
$().ready(function(){
$('img').addClass('zoom');
});
當您添加變焦類,圖像在4個secondes比例爲2。
看到完整的演示:http://jsfiddle.net/rNY6T/18/
這不是我所需要的,但是謝謝你,我終於有了額外的部分來移動縮放位置,它是'translate(5em,0);'這樣我可以移動隨機變焦:)謝謝,爲了jsfiddle和你的時間! – Trouble 2012-08-03 11:14:49
我有一個問題。這種動畫在IE中不起作用(目前正在測試IE 8)。但是'http:// codecanyon.net/item/estro-jquery-ken-burns-slider-wordpress-plugin/full_screen_preview/356713'可以工作,這是我想要的效果。你可以看一下嗎? – Trouble 2012-08-06 13:43:09