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
文章摘要如下：

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

控制代码：

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

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

JS模拟FLASH效果

评论 (0)