Question

<div id="dragon" style="position: absolute; left: 600px; top: 400px;  width:90px; height:90px;">

   <script language="JavaScript">

 $(document).ready(function() {

if(window.addEventListener)window.addEventListener("load",animateImagesStart,false);
else if(window.attachEvent)window.attachEvent("onload",animateImagesStart);
 });


function animateImagesStart() {

var imgs=[
        "image/dragon/drag0.png", "image/dragon/drag1.png", "image/dragon/drag2.png",    "image/dragon/drag3.png",  "image/dragon/drag4.png", "image/dragon/drag5.png", "image/dragon/drag6.png", "image/dragon/drag7.png", "image/dragon/drag8.png","image/dragon/drag9.png"
    ];

// preloading images
var img,count=imgs.length,

    imageLoadComplete=function(ev) {
        if(ev.type=="error")imgs.splice(imgs.indexOf(this),1);
    };

for(var i=0;i<count;i++){
    img=new Image();
    img.onerror=imageLoadComplete;
    img.src=imgs[i];
    imgs[i]=img;
}

var domImg=document.getElementById("dragon"),
    currentImageIndex=0,
    animateImages=function(){
        if(currentImageIndex>=imgs.length)currentImageIndex=0;
        if(imgs[currentImageIndex].complete)domImg.style.backgroundImage="URL("+imgs[currentImageIndex].src+")";

        currentImageIndex++;
        setTimeout(animateImages,1000);
    };
setTimeout(animateImages,0);

}

现在，动画图片很小，只是默认图片大小，我该如何将其缩放到大小？我试试if（imgs [currentImageIndex] .complete）domImg.style.backgroundImage.height ='200px'; 如果（IMGS [currentImageIndex] .complete）domImg.style.backgroundImage.width = '200像素'; 这没有做任何事情。

我也试试现在不是更大的动画大小，而是有4个动画图像实例，它们都具有相同的大小和原始大小。

我想要的是动画图像的一个实例并将其缩放得更大。

Answer 1

您希望使用background-size CSS声明来缩放背景图像。背景图像缩放不直接与应用背景的节点的尺寸相关联。默认情况下，背景将以原始图像的任何分辨率呈现，并平铺以适合分配给它们的任何节点（这就是为什么在增加div的大小时看到多个背景图像的原因）。

请注意，IE9及更高版本支持后台大小但不低于此值。（所有其他主流浏览器现在都支持它了一段时间。）如果你需要支持IE8及更低版本，你可能需要注入一个符合你想要的实际img标签，并使用z-index来确保它渲染其他节点。

在Javascript上缩放动画图像大小

1 个答案: