JS模拟FLASH的效果，一般也就用在图片的控制上了，否则，还能怎么模拟？其实我说的这个模拟并不是说真的象FLASH，而是利用了一堆图片来模拟GIF的效果。
理论上，用图片模拟GIF是可以达到的，只要利用setTimeout或者setIntval这两个函数中的任意一个，在人的视觉那24帧进行合理的控制，可以让人感觉到它在动的感觉。
当然我没有写过，只是说理论上可行，但事实上，有人这样实现了。不过我个人觉得这样的意义并不是很大，因为要下载N个图片的话如果网速不好，那么很有可能就会出现叉叉这样的情况。不过，如果用在LOGO上，就不一样了：LOGO是一个人头，当鼠标移上去时，眼珠会动，因为LOGO一般不会有人会用鼠标去点击或移动，这样当成一个彩蛋也是很不错的。
以前淘宝的宝字，YAHOO的O，都有这样类似的效果。
原文：http://www.cnblogs.com/ublue2006/archive/2009/01/21/1379242.html
文章摘要如下：
JavaScript代码
- var ImageShow=function(options){
- var self=this;
- this.MyTimeOut=null;
- this.DeleteTimeOut=function(){
- if(self.MyTimeOut!=null)
- clearTimeout(self.MyTimeOut);
- };
- this.NowIndex=0;
- this.ASC=true;
- this.errState=false;
- var Images=[];
- var TimeSpace=0;
- if(options.Obj!=null&&options.Images!=null){
- var Obj=options.Obj;
- var TempImages=options.Images;
- if(TempImages.length>=2){
- var imgType;
- try {
- for(var i=0;i<TempImages.length;i++){
- var imageName=TempImages[i].Image;
- imgType=imageName.toLowerCase().substring(TempImages[i].Image.length-4);
- if(imgType==".jpg"||imgType==".gif"||imgType==".bmp"||imgType==".png"||imgType=="jpeg"){
- Images.push(TempImages[i]);
- }
- }
- }
- catch(err){}
- }
- if(options.TimeSpace!=null&&IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;
- else TimeSpace=10;
- if(TimeSpace<5) TimeSpace=5;
- }
- this.ChangeImage=function(){
- try{
- if(Images[self.NowIndex]!=null)
- {
- if(options.BackGround==true){
- if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";
- if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;
- if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;
- if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;
- if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))
- Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat;}
- if(options.Src==true){
- if(Images[self.NowIndex].Image!=null) Obj.src=Images[self.NowIndex].Image;
- if(Images[self.NowIndex].Width!=null&&BlueEffects.IsNum(Images[self.NowIndex].Width)==true) Obj.style.width=Images[self.NowIndex].Width+"px";
- if(Images[self.NowIndex].Height!=null&&BlueEffects.IsNum(Images[self.NowIndex].Height)==true) Obj.style.height=Images[self.NowIndex].Height+"px"; }
- if(options.BackGround!=true&&options.Src!=true){
- if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";
- if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;
- if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;
- if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;
- if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))
- Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat; }
- }
- }
- catch(err)
- {self.errState=true;}
- self.MyTimeOut=setTimeout(self.ChangeImage,TimeSpace);
- if(self.ASC==false)
- {
- self.NowIndex--;
- if(self.NowIndex<=-1||self.errState==true) {
- clearTimeout(self.MyTimeOut);
- if(options.Stop!=null)try{options.Stop();}catch(err){}
- }
- }
- else if(self.ASC==true)
- {
- self.NowIndex++;
- if(self.NowIndex>=Images.length+1||self.errState==true){
- clearTimeout(self.MyTimeOut);
- if(options.Stop!=null)try{options.Stop();}catch(err){}
- }
- }
- }//end this.ChangeImage
- } //end ImageShow
控制代码：
JavaScript代码
- var Show1=null;
- function MouseOver(Num)
- {
- var Obj=null;
- if(Num==1)
- Obj=Show1;
- Obj.DeleteTimeOut();
- Obj.ASC=true;
- Obj.ChangeImage();
- }
- function MouseOut(Num)
- {
- var Obj=null;
- if(Num==1)
- Obj=Show1;
- Obj.DeleteTimeOut();
- Obj.ASC=false;
- Obj.ChangeImage();
- // alert(Show.NowIndex);
- }
- function Loaded()
- {
- Show1=new ImageShow({Obj:document.getElementById("ImgArea1"),TimeSpace:50,Images:Images1,BackGround:true});
- MouseOver(1);
- }
更多的代码我就不贴了，可以到上面的网址去看，我也只是把这些实现的代码理出来了。