手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:effect

JS模拟FLASH效果

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代码
  1. var ImageShow=function(options){  
  2.     var self=this;  
  3.       
  4.     this.MyTimeOut=null;    
  5.     this.DeleteTimeOut=function(){  
  6.           if(self.MyTimeOut!=null)  
  7.           clearTimeout(self.MyTimeOut);  
  8.             
  9.        };   
  10.          
  11.     this.NowIndex=0;  
  12.     this.ASC=true;  
  13.     this.errState=false;       
  14.     var Images=[];  
  15.     var TimeSpace=0;      
  16.       
  17.      
  18.       
  19.     if(options.Obj!=null&&options.Images!=null){      
  20.     var Obj=options.Obj;    
  21.     var TempImages=options.Images;     
  22.     if(TempImages.length>=2){  
  23.        var imgType;  
  24.        try {  
  25.           for(var i=0;i<TempImages.length;i++){            
  26.              var imageName=TempImages[i].Image;  
  27.               imgType=imageName.toLowerCase().substring(TempImages[i].Image.length-4);           
  28.               if(imgType==".jpg"||imgType==".gif"||imgType==".bmp"||imgType==".png"||imgType=="jpeg"){  
  29.               Images.push(TempImages[i]);               
  30.               }  
  31.              }  
  32.            }  
  33.           catch(err){}  
  34.     }          
  35.          
  36.        if(options.TimeSpace!=null&&IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;  
  37.        else TimeSpace=10;  
  38.        if(TimeSpace<5)  TimeSpace=5;   
  39.     }  
  40.      this.ChangeImage=function(){   
  41.        
  42.         try{    
  43.           if(Images[self.NowIndex]!=null)  
  44.           {   
  45.            
  46.           if(options.BackGround==true){            
  47.           if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";   
  48.           if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;  
  49.           if(Images[self.NowIndex].PositionX!=null)  Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;  
  50.           if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;  
  51.           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"))  
  52.           Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat;}           
  53.           if(options.Src==true){           
  54.           if(Images[self.NowIndex].Image!=null) Obj.src=Images[self.NowIndex].Image;  
  55.           if(Images[self.NowIndex].Width!=null&&BlueEffects.IsNum(Images[self.NowIndex].Width)==true) Obj.style.width=Images[self.NowIndex].Width+"px";    
  56.           if(Images[self.NowIndex].Height!=null&&BlueEffects.IsNum(Images[self.NowIndex].Height)==true) Obj.style.height=Images[self.NowIndex].Height+"px";   }          
  57.           if(options.BackGround!=true&&options.Src!=true){  
  58.           if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";   
  59.           if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;  
  60.           if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;  
  61.           if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;  
  62.           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"))  
  63.           Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat; }  
  64.           }  
  65.           }  
  66.           catch(err)  
  67.           {self.errState=true;}   
  68.                    
  69.           self.MyTimeOut=setTimeout(self.ChangeImage,TimeSpace);  
  70.             
  71.           if(self.ASC==false)  
  72.           {             
  73.               self.NowIndex--;  
  74.               if(self.NowIndex<=-1||self.errState==true) {  
  75.               clearTimeout(self.MyTimeOut);  
  76.               if(options.Stop!=null)try{options.Stop();}catch(err){}  
  77.               }              
  78.           }  
  79.           else if(self.ASC==true)  
  80.           {  
  81.            self.NowIndex++;   
  82.            if(self.NowIndex>=Images.length+1||self.errState==true){  
  83.            clearTimeout(self.MyTimeOut);  
  84.            if(options.Stop!=null)try{options.Stop();}catch(err){}  
  85.            }  
  86.           }  
  87.        }//end this.ChangeImage  
  88.  } //end ImageShow  

控制代码:

JavaScript代码
  1.  var Show1=null;        
  2.   
  3. function MouseOver(Num)  
  4. {         
  5. var Obj=null;  
  6. if(Num==1)  
  7.  Obj=Show1;        
  8.         
  9. Obj.DeleteTimeOut();  
  10. Obj.ASC=true;  
  11. Obj.ChangeImage();          
  12. }  
  13.   
  14. function MouseOut(Num)  
  15. {  
  16. var Obj=null;  
  17. if(Num==1)  
  18.  Obj=Show1;   
  19.        
  20. Obj.DeleteTimeOut();  
  21. Obj.ASC=false;  
  22. Obj.ChangeImage();  
  23. // alert(Show.NowIndex);  
  24. }  
  25.   
  26. function Loaded()  
  27. {  
  28. Show1=new ImageShow({Obj:document.getElementById("ImgArea1"),TimeSpace:50,Images:Images1,BackGround:true});         
  29. MouseOver(1);  
  30. }  

更多的代码我就不贴了,可以到上面的网址去看,我也只是把这些实现的代码理出来了。

Tags: js, flash, effect, gif