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

JS模拟FLASH效果

Submitted by gouki on 2009, February 3, 10:46 PM

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

Javascript | 评论:0 | 阅读:23289

对膘叔的文章感兴趣的朋友可以使用JS调用功能

Submitted by gouki on 2008, July 30, 4:38 PM

<script type="text/javascript" charset="utf-8" src="http://www.neatcn.com/js.php?view=article&cids=1&titlenum=10&titlelimit=50&newwindow=1&cname=0&author=0&orderby=dateline&dateline=0&articleinfo=0"></script>

一一分析路径。。。
view=article&cids=1&titlenum=10&titlelimit=50&newwindow=1&cname=0&author=0&orderby=dateline&dateline=0&articleinfo=0

以上代码表示：

view = article  调用文章
cids=1 分类ID为1，如果没有cids，则代表调用所有分类
titlenum=10 显示为10条
titlelimit=50  标题截取字数为50
newwindow=1 表示是否开新窗：1为开新窗0为不开
cname=0 表示显示文章所在分类：1为显示，0为不显示
author=0 是否显示作者姓名，1为显示，0为不显示
orderby=dateline 表示文章按什么类型排序>> dateline：文章发表的时间 ，views：浏览次数最多的文章，comments：评论次数最多的文章
dateline=0 是否显示文章发表时间：1为显示，0为不显示
articleinfo=0 是否显示文章数据包括浏览次数和评论次数，1为显示，0为不显示

黑黑，尝试一下吧。，。。

Tags: js, 调用, 文章, 分类

Software | 评论:0 | 阅读:19788

javascript实现函数重载的深入探索

Submitted by gouki on 2008, April 27, 11:15 PM

 

COPY自一个网站，该网站声明此文章来自CSDN，代码没有仔细研读，但担心以后可能会用到。先MARK一下，做个记录。所以……

直接为我的博客加点料，原作者看到此文时，如觉不适，请通知删除。谢谢

JavaScript代码
  1. <script>   
  2. function Point2D(x, y)   
  3. {   
  4.  this.x = x;   
  5.  this.y = y;   
  6.  Point2D.prototype.quadrant = function()   
  7.  {   
  8.   if (x > 0 && y > 0) return "I";   
  9.   else if (x < 0 && y > 0) return "II";   
  10.   else if (x < 0 && y < 0) return "III";   
  11.   else if (x > 0 && y < 0) return "IV";   
  12.   else if (x == 0) return "x-axis";   
  13.   else if (y == 0) return "y-axis";   
  14.   else throw new Error();   
  15.  }   
  16.  Point2D.prototype.toVector = function()   
  17.  {   
  18.   return new Vector2D(x, y);   
  19.  }   
  20.  Point2D.prototype.distance = function() //求距离   
  21.  {   
  22.   if (arguments.length == 1 && arguments[0] instanceof Point2D)    
  23.   {   
  24.    return this._point_distance.apply(this, arguments);   
  25.   }   
  26.   else if (arguments.length == 1 && arguments[0] instanceof Vector2D)    
  27.   {   
  28.    return this._vector_distance.apply(this, arguments);   
  29.   }   
  30.   else  
  31.   {   
  32.    throw new Error("Argument Error!");   
  33.   }   
  34.  }   
  35.  Point2D.prototype._point_distance = function(p)  //求两点之间的距离(函数重载)   
  36.  {   
  37.   return (new Vector2D(p,this)).length();   
  38.  }   
  39.  Point2D.prototype._vector_distance = function(v)  //求点到向量的距离(函数重载)   
  40.  {   
  41.   var v1 = new Vector2D(this, v.start);   
  42.   var v2 = new Vector2D(this, v.end);   
  43.   
  44.   var area = Math.abs(v1.cross(v2));  //平行四边形面积 = v1 X v2 = |v1v2|sin(v1,v2)   
  45.      
  46.   return area / v.length();   //平行四边形面积除以底边长度即为点到向量的距离   
  47.  }   
  48. }   
  49. function Vector2D()   
  50. {   
  51.  if (arguments.length == 2 && arguments[0] instanceof Point2D && arguments[1] instanceof Point2D)   
  52.  {   
  53.   _point_point_Vector2D.apply(this, arguments);   
  54.  }   
  55.  else if (arguments.length == 2 && !isNaN(arguments[0]) && !isNaN(arguments[1]))   
  56.  {   
  57.   _double_double_Vector2D.apply(this, arguments);   
  58.  }   
  59.  else if (arguments.length == 4 && !isNaN(arguments[0]) && !isNaN(arguments[1])    
  60.   && !isNaN(arguments[2]) && !isNaN(arguments[3]))   
  61.  {   
  62.   _double_double_double_double_Vector2D.apply(this, arguments);   
  63.  }   
  64.  else  
  65.  {   
  66.   throw new Error("Argument Error!");   
  67.  }   
  68. }   
  69. function _point_point_Vector2D(p1, p2)      
  70. {   
  71.  this.start = p1;   
  72.  this.end = p2;   
  73.  Vector2D.prototype.length = function() //求向量的长度   
  74.  {   
  75.   return Math.sqrt(this.pond_x() * this.pond_x() + this.pond_y() * this.pond_y());   
  76.  }   
  77.  Vector2D.prototype.pond_x = function() //x方向分量   
  78.  {   
  79.   return this.start.x - this.end.x;   
  80.  }   
  81.  Vector2D.prototype.pond_y = function()   
  82.  {   
  83.   return this.start.y - this.end.y;   
  84.  }   
  85.  Vector2D.prototype.cross = function(v)   //求向量的交积 P1 X P2 = x1y2 - x2y1   
  86.  {   
  87.   return this.pond_x() * v.pond_y() - v.pond_x() * this.pond_y();   
  88.  }   
  89. }   
  90. function _double_double_Vector2D(x,y) //重载构造函数Vector2D   
  91. {   
  92.  this.pointPairs = new Array();   
  93.  this.pointPairs[0] = new Point2D(0, 0);   
  94.  this.pointPairs[1] = new Point2D(x, y);   
  95.   
  96.  _point_point_Vector2D.apply(this, this.pointPairs);   
  97. }   
  98. function _double_double_double_double_Vector2D(x1, y1, x2, y2)  //重载构造函数Vector2D   
  99. {   
  100.  this.pointPairs = new Array();   
  101.  this.pointPairs[0] = new Point2D(x1, y1);   
  102.  this.pointPairs[1] = new Point2D(x2, y2);   
  103.   
  104.  _point_point_Vector2D.apply(this, this.pointPairs);   
  105. }   
  106. var p1 = new Point2D(0,0);   
  107. var p2 = new Point2D(10,10);   
  108. var v1 = new Vector2D(p1,p2);  //通过两个点(p1,p2)的方式来构造向量V1   
  109. alert("向量v1长度:"+v1.length());   
  110. var v2 = new Vector2D(0,0,5,5);  //通过四个坐标(x1,y1,x2,y2)的方式来构造向量V2   
  111. alert("向量v2长度:"+v2.length());   
  112. var v3 = new Vector2D(0,10);  //通过指定终点的方式来构造向量V3   
  113. alert("向量v3长度:"+v3.length());   
  114. alert("向量v1与v2的交积:"+v1.cross(v2));  //求V1 X V2 (因为平行，所以结果为0)   
  115.   
  116. var p3 = new Point2D(10,0);   
  117. alert("点p1与p3的距离:"+p1.distance(p3));   
  118. alert("点p3与向量v1的距离:"+p3.distance(v1));   
  119. </script>  

 

Tags: js, 重载

Javascript | 评论:0 | 阅读:23790

javascipt的{}中逗号带来的困扰

Submitted by gouki on 2008, April 25, 11:37 PM

随便javascript 第5版的书出来，JS的写法也就越来越多了，以前定义一个对象，还得写var o = new Object();现在好了，直接var o = {};

可是这样带来的问题不少（其实是IE和FF的兼容性问题）

下面是一个朋友痛苦的经历：

 

XML/HTML代码
  1. 最近把YUI()引入到了现在做的项目当中，感觉做ajax非常顺手   
  2.   
  3. 由于firefox下有firebug这个插件，所以开发的时候都是以ie为准   
  4. 稍微在ie下做些测试，一般都没有问题。   
  5.   
  6. 这次被一个逗号搞得非常辛苦。   
  7.   
  8. var send_email_callback =    
  9. {    
  10.     success:handleSuccess,    
  11.     failure:handleFailure，    
  12. };    
  13. 这段代码在firefox和ie下都不会报错   
  14. firefox运行正常，ie下导致整个脚本失效   
  15.   
  16. 调试都是用alert来调试，但是ie下alert的功能也失效了，无论alert放在文件的那个位置，都不会有弹框出来   
  17. 整个js文件代码长达300行，找的好辛苦。。。   
  18. 正确的应为： var send_email_callback =    
  19. {    
  20.     success:handleSuccess,    
  21.     failure:handleFailure    
  22. }; 唉，一个逗号引发的辛苦啊。。   
  23.   
  24. 这个错误应该是受到php里面array写法的影响   
  25. 经常在定义array时为了给array添加新值方便，一般都是会再加一个逗号。。。   
  26.   
  27. 另外，还有个地方也会导致脚本在ie下失效   
  28. _div_sending.className     = 'mail_sending';   
  29. //_div_sending.class     = 'mail_sending';   
  30. 其中第二行会导致脚本不能运行，也不会报错，同样无论什么地方放一个alert都不会有反应   
  31. 额，以前看一本书上说，给控件加class的值，这样好像会做到多个浏览器兼容。。。faint，或许是我记错了吧。。   
  32. 解决的办法，注释掉，或者用yui自带的添加的class的方法   
  33. 这段代码是几个星期前写的，那个时候还没有看到yui给控件加class的方法   
  34. YAHOO.util.Dom.addClass(_div_sending, 'mail_sending');   
  35. 希望有人可以告诉我，ie下调试js简单的方法   
  36. 额，我的js的水平也太臭了。。。额。。。。  

确实,在"}"前的最后一个","非常害人。在IE下死活会报错，而且FF下面又完全正常。现在我一看报错，就立马检查是否多了这个","，PHP的ARRAY习惯害人啊……总是担心可能会往配置数组里加东西，所以，每行最后都习惯性的加上逗号，现在……不太敢了。

Tags: json, js

Javascript | 评论:6 | 阅读:29731

Records:9‹12