縮放動畫的圖像尺寸上的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

回答

相關問題