動畫背景圖像與背景大小 - jsfiddle更新

我想動畫的div元素的背景，我已經得到它從其他人的代碼動畫。問題是背景的css屬性是background-size：cover，所以它在動畫中顯示該圖像的副本，如何創建圖像的水平和垂直位置的動畫，並且在動畫之後沒有顯示重複圖像做了什麼？是否有一段代碼可以使其按照我想要的方式工作，或者是否存在可以做到這一點的插件，該插件可以爲背景尺寸提供縮放效果，PS背景必須是背景尺寸：由於彈性網頁設計，這裏是代碼。動畫背景圖像與背景大小 - jsfiddle更新

jsfiddle

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: -20, temporary_y: -20}, { 
duration: 350, 
step: function() { 
    var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px"; 
    $("#image").css({"background-position": position, backgroundSize: 'auto !important'}); 
    } 
});

來源

2014-01-23 ONYX

jsfiddle會更好！ –

我添加了一個小提琴http://jsfiddle.net/sny9H/ – ONYX

你想要什麼精確縮放圖像或只是一些動作就像在你的小提琴沒有圖像重複 –

我改變的CSS有點重演停止圖像。

#image { 
background-size: cover; 
background: url(http://ts2.mm.bing.net/th?id=H.4546305711735429&w=240&h=133&c=7&rs=1&pid=1.7) no-repeat; 
width: 240px; 
height: 133px;

}

這裏的fiddle.

希望它能幫助。

來源

2014-01-23 05:52:15 mint

是的，這就是我想要的現在我怎麼得到它放大 – ONYX

我想你會有一個更容易的時間沒有使用背景圖像。 background-size屬性有點新，並且在每個瀏覽器中的行爲都不相同。我認爲只需使用img元素並在懸停時縮放它會更容易一些。您將需要設置父元素溢出：隱藏

來源

2014-01-23 06:04:18 user2631523

這可以使用僞元素來包含背景。

它允許您最初將僞元素設置爲100％大小，但afertwards會將其更改爲任何您想要的值。

如果您通過右側和底部屬性設置位置，那麼您需要將它移動很少（或者可能完全沒有）。

這是CSS

#image { 
    width:240px; height:133px; 
    position: relative; 
    overflow: hidden; 
} 

#image:before { 
    background-size:cover; 
     background-image:url(http://ts2.mm.bing.net/th?id=H.4546305711735429&w=240&h=133&c=7&rs=1&pid=1.7); 
     content: ""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    right: 0px; 
    bottom: 0px; 
    transition: 0.3s all; 
} 

#image:hover:before { 
    width: 110%; 
    height: 110%; 
    right: -5px; 
    bottom: -5px; 
}

和JavaScript已經一去不復返了。

updated fiddle

來源

2014-01-23 20:51:15 vals

動畫背景圖像與背景大小 - jsfiddle更新

回答

相關問題