缩放动画的图像尺寸上的Javascript

<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);

}缩放动画的图像尺寸上的Javascript

眼下，动画形象小，只是默认图像尺寸，我怎么能确定其比例来比格[R尺寸？我尝试如果（imgs [currentImageIndex] .complete）domImg.style.backgroundImage.height ='200px'; if（imgs [currentImageIndex] .complete）domImg.style.backgroundImage.width ='200px'; 这没有做任何事情。

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

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

来源

2012-02-20 lilzz

您想使用background-size CSS声明来缩放背景图片。背景图像缩放不直接与应用背景的节点的维度相关联。默认情况下，背景会以原始图像的任何分辨率进行渲染，而瓦片则适合分配给它们的任何节点（这就是为什么当您增加div大小时看到多个背景图像的原因）。

请注意，IE9支持后台大小，但不会低于此值。（所有其他主流浏览器都支持它一段时间了。）如果您需要支持IE8或更低版本，则可能需要注入一个实际的img标记，并将其缩放到您想要的值并使用z-index来确保它呈现在其他节点之后。

来源

2012-02-23 14:26:41

缩放动画的图像尺寸上的Javascript

回答

相关问题