[英]How to .animate() a background-image size
我可以使用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,output
http://jsbin.com/xuhuca/1/edit?html,css,js,output
background-size: cover;
http://jsbin.com/varecu/2/edit
(调整所有这些演示的窗口以查看魔法。背景图像调整大小!)
假设您希望#outer符合屏幕尺寸,您可以这样做:
var setSize = function(w, h) {
$('#outer').css({
'background-size': w + 'px ' + h + 'px'
})
}
setSize函数有两个参数,width和height。 您可以从任何需要的地方调用此函数,f.ex on resize。 您可以将当前窗口的宽度和高度传递给函数,如下所示:
window.on(resize, function(){
var wt_r = $(window).width();
var ht_r = $(window).height();
setSize(wt_r, ht_r);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.