动画背景图像与背景大小 - 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更新

回答

相关问题