js实现：会骂人的图片，不信鼠标移上来试试！

还是照常例，先上效果：其实原理很简单的，只不过做出效果来显得比较有趣而已。鼠标移到图片上试试，它绝对会骂人的哦，呵呵！不过要等到下面显示的一列小图片都加载完了以后才能看到最好的效果。[效果来自精灵部落]

////////////////////////////////鼠标移到图片上试试/////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////

      重复上面的说，原理其实很简单，就是播放一序列的图片，跟flash是一样的。关键是控制播放的问题。设计这个动画的根本目的在于解决同一类需求，即实现类似flash的“桢”动画。用js 数组定义好每一个桢，类似这里的：{Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_1.gif",Repeat:"no-repeat"}，这一桢需要定义的内容包括：图片的链接地址，如果设置为以背景图片的形式播放动画的话，还需要设置背景图片的重复排列方式，这个跟css一样。如果把所有桢的图片都设计在一张大图上（事实上可能更多情况下都是把所有桢设计在一张图片上的，就像前面一篇文章讲到的google首页图标动画。），还需要设置本桢所要显示的图片的位置，关于这个可以参考前面google首页动画的例子。这里我 要反对某些网友说的我把那个图标动画写的多么复杂的说法，因为我的动画是一个通用的方法，那只是一个自定义实现的例子而已，列出来的那么一长串的数组，其实都只是对动画桢的定义，能说是复杂么？这里再写这个动画，其实都有点是重复的，但是又很想让大家知道，仔细看一下，千万不要错过这个看似小，其实很强大的效果哦！

      回到正题，我们且说这个小动画，由16桢组成的，每桢图片都显示在下面，同时，这里再给出桢定义数组：

 1 var Images1=
 2 [{Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_1.gif",Repeat:"no-repeat"},
 3 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_2.gif",Repeat:"no-repeat"},
 4 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_3.gif",Repeat:"no-repeat"},
 5 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_4.gif",Repeat:"no-repeat"},
 6 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_5.gif",Repeat:"no-repeat"},
 7 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_6.gif",Repeat:"no-repeat"},
 8 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_7.gif",Repeat:"no-repeat"},
 9 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_8.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_9.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_10.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_11.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_12.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_13.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_14.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_15.gif",Repeat:"no-repeat"},
 {Image:"http://www.cnblogs.com/images/cnblogs_com/ublue2006/173572/0030-6341a_16.gif",Repeat:"no-repeat"}
 ];

 很简单的，不过看起来，自然是显得有点重复。播放每桢的时候，时间间隔都是固定的，如果你需要某一个图片显示两桢的时间，很简单，只要在数组里面加上一个重复的定义就ok了，如果你用过flash，你一定能够联想起来在flash里面是怎么做的！播放桢也简单，就是根据css定义，用js解析定义的内容，然后在页面上显示效果，我想这个效果难的不是怎么实现，而是没有想过要去实现这么一个效果吧？博客园的高手们一看，我想其实不用给代码，大概都应该知道

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

最后，就是如何控制播放了，用mouseover和mouseout事件触发：

 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();
         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);
     }

 试想一下，现在有了这样一个动画实现的思想，以前很多非要flash才能实现的很酷的效果，现在用js来实现是不是也很简单了呢？flash最常见的导航菜单，都是鼠标移过的时候产生一个动画效果，鼠标移出的时候动画效果回滚，发挥你的想象，如果你真的理解了我的实现思想，那么以后那些很酷的效果，都可以直接改用js 来实现了，而当未来用户发现你的动画居然不是flash的时候，必将更觉得更酷了！呵呵，事实上，我本人就是非常讨厌页面上出现太多的flash，能用js实现的，坚决不用flash，这就是我写这些效果的根本原因所在，呵呵。好了废话不多说了，欢迎大家交流意见，谢谢！

作者：ublue.liao   联系我：QQ:70buluo@163.com/1047166052 电子邮件：70buluo@163.com

网址：http://www.70buluo.com(精灵部落),精灵部落有很多很酷的效果，来看看吧！