提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript图像动画的小demo

JavaScript动画 图像 Demo
2023-06-13 09:14:33 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图形动画</title>
<styletype="text/css">
.de{font-size:30px;text-decoration:none;font-family:微软雅黑;color:#ccc;}
.de:hover{color:#933;}
</style>
<scripttype="text/javascript">
/**
*ImageLoop.js:AnImageLoopclassforperformingimageanimations
*
*ConstructorArguments:
*imageId:theidofthe<img>tagwhichwillbeanimated
*fps:thenumberofframestodisplaypersecond
*frameURLs:anarrayofURLs,oneforeachframeoftheanimation
*
*PublicMethods:
*start():starttheanimation(butwaitforallframestoloadfirst)
*stop():stoptheanimation
*
*PublicProperties:
*loaded:trueifallframesoftheanimationhaveloaded,
*falseotherwise
*/
functionImageLoop(imageId,fps,frameURLs){
//Remembertheimageid.Don"tlookitupyetsincethisconstructor
//maybecalledbeforethedocumentisloaded.
this.imageId=imageId;
//Computethetimetowaitbetweenframesoftheanimation
this.frameInterval=1000/fps;
//AnarrayforholdingImageobjectsforeachframe
this.frames=newArray(frameURLs.length);

this.image=null;//The<img>element,lookedupbyid
this.loaded=false;//Whetherallframeshaveloaded
this.loadedFrames=0;//Howmanyframeshaveloaded
this.startOnLoad=false;//Startanimatingwhendoneloading?
this.frameNumber=-1;//Whatframeiscurrentlydisplayed
this.timer=null;//ThereturnvalueofsetInterval()

//Initializetheframes[]arrayandpreloadtheimages
for(vari=0;i<frameURLs.length;i++){
this.frames[i]=newImage();//CreateImageobject
//Registeraneventhandlersoweknowwhentheframeisloaded
this.frames[i].onload=countLoadedFrames;//definedlater
this.frames[i].src=frameURLs[i];//Preloadtheframe"simage
}

//Thisnestedfunctionisaneventhandlerthatcountshowmany
//frameshavefinishedloading.Whenallareloaded,itsetsaflag,
//andstartstheanimationifithasbeenrequestedtodoso.
varloop=this;
functioncountLoadedFrames(){
loop.loadedFrames++;
if(loop.loadedFrames==loop.frames.length){
loop.loaded=true;
if(loop.startOnLoad)loop.start();
}
}

//Herewedefineafunctionthatdisplaysthenextframeofthe
//animation.Thisfunctioncan"tbeanordinaryinstancemethodbecause
//setInterval()canonlyinvokefunctions,notmethods.Sowemake
//itaclosurethatincludesareferencetotheImageLoopobject
this._displayNextFrame=function(){
//First,incrementtheframenumber.Themodulooperator(%)means
//thatweloopfromthelasttothefirstframe
loop.frameNumber=(loop.frameNumber+1)%loop.frames.length;
//UpdatethesrcpropertyoftheimagetotheURLofthenewframe
loop.image.src=loop.frames[loop.frameNumber].src;
};
}

/**
*ThismethodstartsanImageLoopanimation.Iftheframeimageshavenot
*finishedloading,itinsteadsetsaflagsothattheanimationwill
*automaticallybestartedwhenloadingcompletes
*/
ImageLoop.prototype.start=function(){
if(this.timer!=null)return;//Alreadystarted
//Ifloadingisnotcomplete,setaflagtostartwhenitis
if(!this.loaded)this.startOnLoad=true;
else{
//Ifwehaven"tlookeduptheimagebyidyet,dosonow
if(!this.image)this.image=document.getElementById(this.imageId);
//Displaythefirstframeimmediately
this._displayNextFrame();
//Andsetatimertodisplaysubsequentframes
this.timer=setInterval(this._displayNextFrame,this.frameInterval);
}
};

/**StopanImageLoopanimation*/
ImageLoop.prototype.stop=function(){
if(this.timer)clearInterval(this.timer);
this.timer=null;
};

</script>
<scripttype="text/javascript">
functionde(){
varanimation=newImageLoop("loop",1,["img/img_01.jpg","img/img_02.jpg",]);
varsta=document.getElementById("sta");
varstp=document.getElementById("stp");
sta.onclick=function(){
animation.start();
}
stp.onclick=function(){
animation.stop();
}
}
window.onload=function(){
de();
}
</script>
</head>
<body>
<imgsrc="img/img_01.jpg"id="loop"alt=""title=""/>
<ahref="#"class="de"id="sta">Start</a>
<ahref="#"class="de"id="stp">Stop</a>
</body>
</html>

相关文章