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

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

D2参加随感

今天在D2上海大会上呆了一天,作为一名web开发人员,对于前端技术总还是需要研究和追新的,虽然他们上的课中有一部分我已经了解或者永远不会用到。但并不代表我不能从中学习知识。

一大早和mpeg就往建工锦江大酒店赶,到了之后才发现,和上次ThinkSite(欣才)举办的一个小型沙龙是在同一个地方,由于我的号码已经是100多了,去的时候也是很紧张的,怕是他们开始了不让俺进。

进去时,正是adobe的马鉴在介绍flash10的一些新特性,感觉flash可做的事情真多呀。好恐怖呀。印象最深的是一块画布在被采用各种 技术进行渲染,性能实在恐怖(不过他是用mac的,我不知道windows下,是否还有同样的性能)
接下来就是土豆网的大麦?介绍了flash的协作开发,可惜由于adobe的朋友讲的太优秀了,相比较而言,他讲的实在就有点。。。。
吃过饭后进行抽奖,象俺这么英俊潇洒的人一向遭人妒忌的,所以,奖项就离我远去了。
接着是alibaba的一位帅哥讲了敏捷开发,节奏把握的很好,确实很有水平。在他讲完之后,接着是微软的王超奇介绍IE8的一些新特性。说实话,他讲的内容没有什么特别的,毕竟这些都是可以看news list看得到的,但是演讲之前的那段广告视频却非常不错,没见过,也吸引了很多眼球 。淘 宝UED和土豆小麦在最后讲了一些内容,都是在赶时间了。。。

本次的亮点:1、叽歪互动 2、书
或许搞技术的都不太擅长直接语言交流,这个叽歪互动则让更多的人进行了参与,在以前的一些会议中,看起来是不可想像的,但如今却成了一种新的交流方式(依稀记得好象是某个年会上开始有叽歪参与,然后就一发不可收拾了,叽歪也随之出名)
书是第二个亮点,可惜我一本都没有拿到,好象是那本:悟透javascript还有adobe air开发(看到有人在送这本书给其他人时,那人感慨了一句:啊,是译本呀,唉我还以为是原版呢。)看来国内对于译本的质量都不太看好呀。

感受还是很深的,一直在搞后端的WEB开发,不料前端已经走的这么快了。再次感慨一下(听说,会上的资料会提供下载,不知道何时能够有的下载)

Tags: d2, taobao, tudou, microsoft, adobe

ThinkPHP两周年,同时有新的更新


官方的话:
新年的气氛即将恢复平静,ThinkPHP也快2岁了,这是一个让所有关注和支持ThinkPHP的朋友们值得祝贺的时刻,官方也准备了一份礼物以回馈大 家的支持,感谢大家和ThinkPHP风雨同舟一起度过。届时将开通ThinkPHP官方在线体验中心,给大家送上丰富的示例和演示,而且还将发布一个更 新版本,包含了值得期待的项目目录自动创建功能和众多的完善。新手们有福了,呵呵~希望2008奥运年大家红红火火,继续努力!
  PS:了解ThinkPHP发展历史的人应该猜到2周年是什么时候了,呵呵~

目前,官方还推出了新的示例中心,网址是:http://exp.thinkphp.cn/Examples/

» 阅读全文

Tags: thinkphp, 框架

ThinkPHP介绍

  ThinkPHP 是一个开源的快速、兼容而且简单的面向对象的轻量级 PHP 开发框架,遵循Apache2 开源协议发布,是为了简化企业级应用开发和敏捷 WEB 应用开发而诞生的。借鉴了国外很多优秀的框架和模式,使用面向对象的开发结构和 MVC 模式,融合了 Struts 的 Action 思想和 JSP的 TagLib(标签库)、RoR 的 ORM 映射和 ActiveRecord 模式,封装了 CURD和一些常用操作,单一入口模式等,在模版引擎、缓存机制、认证机制和扩展性方面均有独特的表现。
  使用 ThinkPHP,你可以更方便和快捷的开发和部署应用,当然不仅仅是企业级应用,任何 PHP 应用开发都可以从 ThinkPHP的简单、兼容和快速的特性中受益。简洁、快速和实用是 ThinkPHP发展秉承的宗旨,为此 ThinkPHP会不断吸收和融入更好的技术以保证其新鲜和活力,提供 WEB 应用开发的最佳实践!

» 阅读全文

Tags: 框架, thinkphp, 流年