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

获取当前元素的索引值

Submitted by gouki on 2009, February 6, 11:58 PM

jQuery获取当前元素的索引值还是很方便的，比如一大堆的li，当鼠标移上去的时候，你知道这个li是众多li中的第几个吗？

JavaScript代码
  1. $("li").hover(function(){  
  2.     alert($("li").index(this));  
  3. });  
.index函数还是很好用的。它的说明为：

搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.

Javascript | 评论:0 | 阅读:18941

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 | 阅读:23958

继续COMET之旅

Submitted by gouki on 2009, February 3, 8:04 AM

1日的时候我把IBM开发者网站上关于COMET的文章进行了转摘，然后就又在博客园上又发现了这篇文章 ，看样子好象还没有连载结束，因此我只作一个链接转向。

http://www.cnblogs.com/lzlynn/archive/2009/01/17/1377383.html

看他的文章内容，也是参考了一下IBM的文章哦。他还说要写框架，观望一下。

COMET彗星（一）SERVER PUSH介绍

COMET彗星（二）基于SERVER PUSH的消息传输

COMET彗星（三）构建自己的COMET核心

 

肯定还有第四篇第五篇哦。。。

Tags: http, comet, 框架

Javascript | 评论:0 | 阅读:22005

基于HTTP长连接的推技术：COMET

Submitted by gouki on 2009, February 1, 10:56 PM

之所以再写一次，是因为看到了IBM上的一篇文章，时间也比较早，我在以前也写过一篇简单的文章来进行介绍，不过这篇IBM的写的比较全，而且我以前的写的也仅仅是评论，并没有就COMET的技术进行详细的介绍。

IBM上是这样说的，这只是简单的摘录一段，详细的还是到该页面去看吧，因为IBM的页面说明了有版权限制，而如果要申请复制文章的话，又比较复杂和繁琐，因此，只能这样了：

http://www.ibm.com/developerworks/cn/web/wa-lo-comet/
  1. 传统模式的 Web 系统以客户端发出请求、服务器端响应的方式工作。这种方式并不能满足很多现实应用的需求，譬如：  
  2.   
  3.     * 监控系统：后台硬件热插拔、LED、温度、电压发生变化；  
  4.     * 即时通信系统：其它用户登录、发送信息；  
  5.     * 即时报价系统：后台数据库内容发生变化；  
  6.   
  7. 这些应用都需要服务器能实时地将更新的信息传送到客户端，而无须客户端发出请求。“服务器推”技术在现实应用中有一些解决方案，本文将这些解决方案分为两类：一类需要在浏览器端安装插件，基于套接口传送信息，或是使用 RMI、CORBA 进行远程调用；而另一类则无须浏览器安装任何插件、基于 HTTP 长连接。  
  8.   
  9. 将“服务器推”应用在 Web 程序中，首先考虑的是如何在功能有限的浏览器端接收、处理信息：  
  10.   
  11.    1. 客户端如何接收、处理信息，是否需要使用套接口或是使用远程调用。客户端呈现给用户的是 HTML 页面还是 Java applet 或 Flash 窗口。如果使用套接口和远程调用，怎么和 JavaScript 结合修改 HTML 的显示。  
  12.    2. 客户与服务器端通信的信息格式，采取怎样的出错处理机制。  
  13.    3. 客户端是否需要支持不同类型的浏览器如 IE、Firefox，是否需要同时支持 Windows 和 Linux 平台。  

Tags: comet, html, push

Javascript | 评论:0 | 阅读:25005

jQuery 1.3 中文文档发布

Submitted by gouki on 2009, January 18, 8:07 PM

jquery 1.3刚刚出来没几天，shawphy的中文API就基本出炉了，有时候真的挺佩服他们，当我们在娱乐的时候，他们还在努力的为我们这些人造福。我没有什么其他能力，只能做到代为传播了。同时也是希望有更多的人参与，可以让我们这些使用者也能够更加方便。

网址：http://shawphy.com/2009/01/release-jquery-doc-cn-1-3.html
原文如下：

jQuery 1.3自从2008年1月14日发布后，后引来了各界的关注。我们也随即投入到翻译文档的工作中来。经过4天的努力，终于完工了。这个版本更新了不少东西

changelog:

2009-01-18 16:06:52 +0800
* triggerHandler 进一步说明
* trigger 进一步说明

2009-01-17 22:37:11 +0800
* live() - 与bind()不同的是，live()一次只能绑定一个事件。
* [attribute!=value] jQuery 1.3中意义改变
* load 的data参数在jQuery 1.3中也可以接受String
+ ajax的error回调的第二个参数可能值”timeout”, “error”, “notmodified” 和 “parsererror”
+ ajax参数xhr
* animate 的duration为0的问题
* show, hide, toggle, slideDown, slideUp, slideToggle 在jQuery 1.3中，padding和margin也会有动画，效果更流畅。
* jQuery(html,[ownerDocument])等效于$(document.createElement(”span”)
* is支持复杂表达式

2009-01-17 18:31:10 +0800
+ jQuery.support.scriptEval
+ 原 Dimension 插件功能（1.2.6版加入jQuery核心）

2009-01-16 19:11:10 +0800
+ jQuery.fx.off
+ toggleClass( class, switch )
+ toggle( switch )
+ toggle(speed,[callback])
* 修改queue和dequeue方法的参数和说明

2009-01-15 22:31:02 +0800
* jQuery(html,[ownerDocument])
+ jQuery.selector
+ jQuery.context
* 效果下的queue和dequeue搬到核心下
+ live()
+ die()
+ closest()
* stop( [clearQueue], [gotoEnd]) 增加两个参数
+ jQuery.support
+ jQuery.isArray( obj )

感谢Cloudream的热情帮忙。还要感谢一揪制作chm版。这个版本还加入了检查更新的功能。如果有需要的同学可轻松查看是否有更新的中文文档(chm版中的检查更新也将同步升级)。

在线查看 下载离线版 bug提交

Tags: javascript, jquery, api

Javascript | 评论:0 | 阅读:22804

Records:305«‹46474849505152535455›»