Question

 <div id="dragon" style="position: absolute; left: 600px; top: 400px; " onload="timeimgs('9');">

</div>

  <script language="JavaScript">


  var anim_images=new Array();
  //putting drag0 to drag9 png into the anim_images array

   for (i=0;i<=10;i++) {
    var name;
   name=eval("drag" + numb + ".png");
    anim_images.push("name");
     }

      function imgturn(numb) { 

   if (numb == "9") { // This will loop the image

    //getting the image of the array when reach 9
    document["demo"].src=anim_images[9];

    //starting again with drag0.png?
    timeimgs('0');
     }

    else { 

    document["demo"].src=anim_images[numb];


    timeimgs(numb = ++numb);
    }
 }   


  function timeimgs(numb) { // Reusable timer

 thetimer = setTimeout("imgturn('" +numb+ "')", 1000);
  }



  </script>

现在，它还没有运作。它将drag0.png设置为200宽度和200高度。我想连续动画drag0.png到drag9.png。

赞赏任何意见。

Answer 1

HTML：

<div id="dragon" style="position:absolute; left:60px; top:40px; width:640px; height:480px; "></div>

JAVASCRIPT：

function animateImagesStart() {
    // next array generation code only for my sample/test: comment it or delete
    var imgs=[
            "http://4.bp.blogspot.com/-PilKprMNhpo/TVc4rKk_gKI/AAAAAAAAAWo/O3wPK3kIH_8/s640/two_flowers.preview.jpg",
            "http://1.bp.blogspot.com/-4-NEunVEZxA/TWendjaBwOI/AAAAAAAAAAU/KKO4MDt5xJ0/s640/10_4_orig.jpg",
            "http://4.bp.blogspot.com/-pc9ImOpPTs0/TaxDIYd5JnI/AAAAAAAAA_M/PF8b7H3nCs8/s640/ocean-flowers.jpg",
            "http://4.bp.blogspot.com/-3CjVKRE6kXE/Ti_Gy6fXKuI/AAAAAAAAG3k/-er17XD7uJc/s640/cherry-blossom-pink-flowers-3.jpg",
            "http://whatscookingamerica.net/EdibleFlowers/LavenderFlowers.jpg",
            "http://www.photographyblogger.net/wp-content/uploads/2010/05/flower23.jpg",
            "http://1.bp.blogspot.com/_24bCsL1xWcM/S6ob05W5KbI/AAAAAAAAAOQ/ZEQK9aiR-nQ/s1600/Flowers.jpg",
            "http://3.bp.blogspot.com/_NjdBzKI5nYs/Sc79kMCKxZI/AAAAAAAABu8/vfk6RrGzpPw/s640/flower+sky+wallpaper+image+photo+pic.jpg",
            "http://4.bp.blogspot.com/-ik3E8PBBf70/TwaZ9PMNbrI/AAAAAAAAAG0/kNrGnEbZ-WY/s1600/flowers2.jpg",
            "http://www.funeral-flowers-online.com/funeral-flowers.jpg"
        ];
    // next array generation code based on your code: uncomment it
/*    
    var imgs=[];
    for(var i=0;i<10;i++)imgs.push("drag"+i+".png"); // 10 images
*/
    // 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(window.addEventListener)window.addEventListener("load",animateImagesStart,false);
else if(window.attachEvent)window.attachEvent("onload",animateImagesStart);

确保您的每张图片都具有与DIV#dragon相同的尺寸（宽度和高度），或将DIV#dragon替换为IMG#dragon html元素，并使用IMG src属性代替{ {1}}。示例：http://jsfiddle.net/RK7u9/1/

使用Javascript动画PNG

1 个答案: