如何.animate(）背景图像大小

How to .animate() a background-image size

本文关键字：图像 背景 animate 如何      更新时间：2023-09-26

我能用javascript/jquery制作背景图像大小的动画吗？

其中wt_r和ht_r是屏幕大小的代码。我可以用.animate（）制作动态吗？

$('#outer').css('background-size',wt_r+' '+ht_r);

jsfiddle-http://jsfiddle.net/m7zmzkpz/1/

您不能同时更改背景图像的高度和宽度。

使用.animate（）：

$('#outer').animate({backgroundSize: '100%'}, 800);

如果没有更多信息，很难回答这个问题，但您可以尝试使用backgroundSize属性设置背景大小的动画？像这样：

$('#outer').animate({ backgroundSize: '100%' }, 3000);

尝试使用您自己的参数wt_r和ht_r作为backgroundSize值

希望这能有所帮助！

当我调整浏览器窗口的大小时，背景图像应该调整大小–X10nD 3分钟前

根本不需要JS

  background-size:100% 100%; // or just 100% to keep Aspect-Ratio

http://jsbin.com/varecu/1/edit?html，css，js，输出

  • 页面加载时制作动画？根本不需要JS：

http://jsbin.com/xuhuca/1/edit?html，css，js，输出

  • 想要保持纵横比，但填满所有空间？background-size: cover;

http://jsbin.com/varecu/2/edit

（调整所有这些演示的窗口大小以查看魔术。背景图像调整大小！）

假设你想要#outer适合屏幕大小，你可以这样做：

var setSize = function(w, h) {
   $('#outer').css({
      'background-size': w + 'px ' + h + 'px'
   })
}

setSize函数接受两个参数，宽度和高度。你可以在任何需要的地方调用这个函数，比如调整大小。您可以将当前窗口的宽度和高度传递到如下函数中：

window.on(resize, function(){
   var wt_r = $(window).width();
   var ht_r = $(window).height();
   setSize(wt_r, ht_r);
})
相关文章：