<![CDATA[Rainweb前端技术博客]]> http://www.rainweb.cn/ zh-cn PBlog2 v2.4 Rainweb前端技术博客 http://www.rainweb.cn/images/logos.gif http://www.rainweb.cn/ Rainweb前端技术博客 http://www.rainweb.cn/article/312.html <![CDATA[谷歌265导航logo的眼珠滚动效果]]> Rainweb@163.com(rainweb) Tue,27 Jul 2010 11:09:39 +0800 http://www.rainweb.cn/default.asp?id=312 点开了谷歌265导航，无意中发现了logo眼睛，会随着鼠标移动，位置改变，看上去就像眼睛一直在盯着鼠标。之后又搜索了一下怎么实现，居然还真有相关文章，都是通过纯js实现的。

分享一下网上比较统一的实现方法：

需用到的图片：

下面就是实现的算法问题，这个需要我们具备一些数学上的几何知识：直角三角形三边符合：直角边1的平方+直角边2的平方=斜边的平方，如果对直角边、斜边不明白，也可以这样理解，短边1的平方+短边2的平方=长边的平方（传说中的勾股定理）相似的两个三角形临近两边之比相等（汗~~还用到了相似三角形）
 

 

就算看了图，也不是非常明白，几何知识早就忘记得差不多了。

觉得好玩才发上来的，用到网页中去还真没有想过，也许只有谷歌才会那么做。

查看demo    有兴趣研究的话也可以下载下来看看

]]> http://www.rainweb.cn/article/311.html <![CDATA[ jQuery ajax实现顶一下，踩一下效果]]> Rainweb@163.com(rainweb) Wed,14 Jul 2010 13:24:18 +0800 http://www.rainweb.cn/default.asp?id=311 先看下效果图

本博客上面的顶一下，踩一下效果是直接用别人做好的插件放上去的，上星期正好要用到这个效果，就去研究了下。下面就一步一步来实现整个效果。。。。

demo页面的实现

XML/HTML代码
  1. <div class="digg" id="digg">  
  2.   <div class="good"> <a href="#">  
  3.     <p>这个文档不错</p>  
  4.     <div class="bar">  
  5.       <div id="g_img" style="width:70%"></div>  
  6.     </div>  
  7.     <span class="num" id="num">70%(7000)</span> </a> </div>  
  8.   <div class="bad"> <a href="#">  
  9.     <p>文档有待改进</p>  
  10.     <div class="bar">  
  11.       <div id="b_img" style="width:30%"></div>  
  12.     </div>  
  13.     <span class="num">30%(3000)</span> </a> </div>  
  14. </div>  

 

主要一点就是通过百分比来控制g_img的宽度，至于css代码就不贴出来了。

 

看下demo就知道了

 

有了demo，其他实现起来就方便多了，首先是页面获取html，页面第一次加载，用ajax获取后台数据，不要直接显示。(这里为了方便测试，就用asp作为后台语言)

下面是asp输出html代码

XML/HTML代码
  1. function getdigshtml()'输出html   
  2.     dim rsajax,sql,str,digsnum,undigsnum,digsnumall,digsper,undigsper   
  3.     Set rsajax=server.CreateObject("adodb.recordset")   
  4.     sql="select * from dig where id=1"  
  5.     rsajax.open sql,conn,1,1   
  6.     digsnum=rsajax("digs")   
  7.     undigsnum=rsajax("undigs")   
  8.     if isnull(digsnum) then digsnum=0  
  9.     if isnull(undigsnum) then undigsnum=0  
  10.     digsnumdigsnumall=digsnum+undigsnum   
  11.        
  12.     if digsnumall=0 then    
  13.         digsper=0  
  14.         undigsper=0  
  15.     else   
  16.         digsper=FormatNumber(cint(digsnum)/cint(digsnumall),3)*100   
  17.         undigsper=FormatNumber(cint(undigsnum)/cint(digsnumall),3)*100   
  18.     end if   
  19.        
  20.     str="<div class='good'>"  
  21.     strstr=str&"<a href=JavaScript:isdigs('digs') >"   
  22.     strstr=str&"<p>这个文档不错</p><div class='bar'><div id='g_img' style='width:"&digsper&"%'></div></div>"   
  23.     strstr=str&"<span class='num'>"&digsper&"%("&digsnum&")</span>"   
  24.     strstr=str&"</a></div><div class='bad'>"   
  25.     strstr=str&"<a href=JavaScript:isdigs('undigs') >"   
  26.     strstr=str&"<p>文档有待改进</p><div class='bar'><div id='b_img' style='width:"&undigsper&"%'></div></div>"   
  27.     strstr=str&"<span class='num'>"&undigsper&"%("&undigsnum&")</span>"   
  28.     strstr=str&"</a></div>"   
  29.     getdigshtml=str  
  30. end function   

 

输出完了 接下来就是前台获取，这时候我们就要用到jquery ajax，为什么不直接用ajax，原因很简单，我不会。。。。。看一下jquery中ajax代码，很简单

javaScript代码
  1. function getdigshtml()//获取顶一下，踩一下html   
  2. {   
  3.     $.ajax({       
  4.         type:'POST',   
  5.         url:'digg.asp',   
  6.         data:'action=getdigshtml',   
  7.         success:function(msg){   
  8.                  $("#digg").html(msg);   
  9.             }   
  10.     })     
  11. }   

 

输出完了，接下来一步就是digs和undigs的操作了，跟获取html的代码差不多

JavaScript代码
  1. function isdigs(digtype)//顶一下，踩一下操作   
  2. {   
  3.         $.ajax({       
  4.         type:'POST',   
  5.         url:'digg.asp',   
  6.         data:'action=digs&digtype='+digtype,   
  7. /*      beforeSend:function(){  
  8.             $("#vote").hide();  
  9.             $("#loadings").show();  
  10.         }, ajax请求显示loading效果*/  
  11.         success:function(msg){   
  12.                 switch (msg)   
  13.                     {   
  14. /*      后台用来判断  
  15.                         case '1':                             
  16.                             $("#loadings").hide();  
  17.                             $("#vote").show();    
  18.                             alert("请先登录！");  
  19.                             break;  
  20.                         case '2':                             
  21.                             $("#loadings").hide();  
  22.                             $("#vote").show();  
  23.                             alert("请先下载，再操作！");                           
  24.                             break;  
  25.                         case '4':                             
  26.                             $("#loadings").hide();  
  27.                             $("#vote").show();  
  28.                             alert("您已经参与过评价！");                           
  29.                             break;*/  
  30.                         case '3':   
  31.                             getdigshtml();//重新绑定html   
  32.                             //$("#loadings").hide();   
  33.                             //$("#vote").show();       
  34.                             alert("谢谢你的参与！");   
  35.                             break;   
  36.                        
  37.                         default:   
  38.                     }   
  39.             }   
  40.         })     
  41. }  

 

注释掉的代码：一部分是后台数据合法验证用的，beforeSend这个方法是ajax请求执行前的相关操作(用于做loading比较多)

最后一步就是，每次数据提交完并且成功返回，getdigshtml()都要重新获取绑定下，这样就保证了数据的实时性。

 

看下最后的效果     点我下载演示

]]> http://www.rainweb.cn/article/310.html <![CDATA[Web导航设计—面包屑]]> Rainweb@163.com(rainweb) Mon,05 Jul 2010 16:54:19 +0800 http://www.rainweb.cn/default.asp?id=310 先谈一下面包屑的由来：
 
      很久很久以前，在大森林的边上住着一个贫穷的樵夫，他妻子和两个孩子与他相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。
 
      在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等月亮一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当月亮升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。
 
这是《格林童话》中所描述的与面包屑有关的故事。不知道从哪一天开始，汉赛尔的面包屑开始悄悄地出现在某个网站的导航位置上，然后迅速地撒遍了全世界，变成了今天大家所熟知的“面包屑导航”。
 
再了解一下面包屑导航的定义：

维基百科上关于面包屑的定义，把Websites那部分解释一下就是这样：
 
       面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接（这些链接也是能到达当前页面的路径），在层级架构中通常是这个页面的父级页面。
 
       面包屑提供给用户回溯到网站首页或入口页面的一条快速路径，它们绝大部分看起来就像这样：首页→分类页→次级分类页
 
以下是英文摘录：
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:
Home page → Section page → Subsection page
 
其次说说面包屑的作用：
 
一是：提供了多路径的交互方式，方便用户跳转到其它页面；

二是：从一个侧面展示了该信息集合的信息结构和集合方式。

三是：“面包屑”信息结构对于网站的SEO也有着大的好处，它可以更多的强调网站关键字，扩大关键字的范围，优化网站的SEO。

 
面包屑包含三种：
 
1、  定位面包屑路径
 
        面包屑路径中最常见的一种。当前页面路径在商城有唯一的位置。
 
        基于位置(Location-based)的面包屑向用户显示他们在网站的哪一个级别页面。它们一般典型的用于有多个级别（一般是多于两级）的导航方案。在下面的例子中(来自于SitePoint)，每一个页面的文本链接表示它比它右边的文本链接高一级。
 
举例(来自蓝色理想论坛)：http://www.sitepoint.com/article/introducing-joomla/

 

A  表明当前在网站内的位置。

 B  提供指向先前访问过的页面（或网站）和其他区域的捷径。

本质上，它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史，而是在整个网站中某个固定的位置。就是说，不管用户是如何到达location 页面，面包屑路径都是一样的。
 
 
2、   路线面包屑路径
 
        路线面包屑是动态的。当前页面路径是根据用户的点击产生的。
        根据到达方式的不同，特定页面上的面包屑路径也不同。基于路径(Path-based)的面包屑路径显示用户到达特定页面的操作步骤，它们显示用户在到达当前页面之前访问过的页面。
 
举例：http://www.epicurious.com/旧版  qzone旧版路径
 
 
3、  属性面包屑路径
 
       当前页面可以通过N条路径找到。
       属性面包屑是描述一个页面的方式，不是它在网站中的位置，也不是访问的路径，而是它在某种元数据方案中的位置，这种方案往往是主题层级的。
基于特性(Attribute-based)的面包屑路径显示一个特定页面的特性。
 
举例：
A、在Newegg，面包屑路径表示在一个特定页面显示的特性内容。
这个页面显示所有拥有由Lian Li制造并有MicroATX微塔式因素的电脑机箱。

 

B、amazon ，面包屑表达的是物品所属类别，并允许点击类别名称访问上级的类别。整条路径提供了最低一级的页面。也就是说提供了多条通往结点页面的情况。

]]> http://www.rainweb.cn/article/309.htm <![CDATA[Easy Slider 1.5—最简单的图像、内容切换插件(插件作者就是这么吹的)]]> Rainweb@163.com(rainweb) Tue,22 Jun 2010 18:26:29 +0800 http://www.rainweb.cn/default.asp?id=309 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

这是原文地址，呵呵，英文好的可以自己去看看原味的。。

 

Features【特点】

  • auto slide（自动滑动）
  • continuous sliding（连续滑动）
  • "go to first" and "go to last" button（有"第一个"与"最后一个"按钮）
  • hiding controls（隐藏控制）
  • optional wrapping markup for control buttons（应该是自定义控制按钮）
  • vertical sliding（垂直滑动）
  • multiple sliders on one page（一个页面多个滑动）

 

下面是一些自定义的参数

JavaScript代码
  1. prevId: 'prevBtn',  
  2. prevText: 'Previous',  
  3. nextId: 'nextBtn',    
  4. nextText: 'Next',  
  5. controlsShow: true,  
  6. controlsBefore: '',  
  7. controlsAfter: '',    
  8. controlsFade: true,  
  9. firstId: 'firstBtn',  
  10. firstText: 'First',  
  11. firstShow: false,  
  12. lastId: 'lastBtn',    
  13. lastText: 'Last',  
  14. lastShow: false,                  
  15. vertical: false,  
  16. speed: 800,  
  17. auto: false,  
  18. pause: 2000,  
  19. continuous: false  

 

具体参数就不解释了，可以看原文，太多了

这里有五个演示demo

 

 

插件下载

]]> http://www.rainweb.cn/article/308.html <![CDATA[简易通用遮罩(lightBox)解决方案]]> Rainweb@163.com(rainweb) Mon,14 Jun 2010 15:56:33 +0800 http://www.rainweb.cn/default.asp?id=308 很久没更新了，端午节放假，还是写点什么吧，要不然对不起自己。。。

 

步入正题：

 

现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。这种方式本来无可非议，但是在页面很长的时候在IE8下会失效（国外资料的解释是与机器显卡相关），有些完美情节的同学遇到这个问题后就抓破了头，无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法，咱们用CSS去解决它！

 

还记得“position:fixed”吗？它是css2的一个新增的属性，他可以让一个元素静止在页面上，拖动滚动条也不会动，如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口，这样就可以实现全屏遮罩了。不用再计算页面的大小，调整浏览器大小的时候也不要去动态修改尺寸了。

 

查看示例一

 

可是有一个头疼的问题，IE6不支持“position:fixed”，咱们只能通过js动态的修改它的TOP值以模拟静止定位，拖动滚动条的时候遮罩成肯定会抖动，因为每改变一次IE会重新渲染一次。但是微软却给我们提供了一个非常有趣的特性，如果给html或者body标签设置一个静止定位的背景图片，层在拖动滚动条的时候就不会抖动了，几乎完美的模拟了“position:fixed”。我在实际项目中发现这个特性他还能触发其他的特异功能，以后再说明。

 

为了省事，咱们针对IE6用万恶expression在CSS中写点脚本，拖动滚动条的时候重新定位我们的遮罩层。传说中expression是非常耗性能的，可是咱们的expression几乎没有损耗，有兴趣的同学可以深入研究下expression。

 

查看示例二

 

好了，兼容IE6这个大头娃娃后，咱们的锁屏遮罩已经通杀主流浏览器了，但是呢用js写效果的同学们总是非常的蛋疼，总想折腾点什么来，咱们就再添加一点脚本，让锁屏的时候后可以中断用户操作，把滚动条、滚轮、tab键、全选、刷新、右键统统禁止掉，模拟真正的‘锁屏’：

 

查看示例三

]]> http://www.rainweb.cn/article/307.html <![CDATA[Javascript中的封装—Encapsulation]]> Rainweb@163.com(rainweb) Thu,03 Jun 2010 13:12:19 +0800 http://www.rainweb.cn/default.asp?id=307 Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

学习Javascript，最难的地方是什么？

我觉得，Object（对象）最难。因为Javascript的Object模型很独特，和其他语言都不一样，初学者不容易掌握。

封装

Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。

那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？

1. 生成对象的原始模式

假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。

JavaScript代码
  1. var Cat = {    
  2. 　　　　name : '',   
  3. 　　　　color : ''  
  4. 　　} 

现在，我们需要根据这个原型对象，生成两个实例对象。

JavaScript代码
  1. var cat1 = {};    
  2. 　　　　cat1.name = "大毛";   
  3. 　　　　cat1.color = "黄色";   
  4. 　　var cat2 = {};   
  5. 　　　　cat2.name = "二毛";   
  6. 　　　　cat2.color = "黑色";   

好了，这就是最简单的封装了。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

2. 原始模式的改进

我们可以写一个函数，解决代码重复的问题。

JavaScript代码
  1. function Cat(name,color){    
  2. 　　　　return {   
  3. 　　　　　　name:name,   
  4. 　　　　　　color:color   
  5. 　　　　}   
  6. }    

然后生成实例对象，就等于是在调用函数：

JavaScript代码
  1. var cat1 = Cat("大毛","黄色");    
  2. var cat2 = Cat("二毛","黑色");  

这种方法的问题依然是，cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

3. 构造函数模式

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

比如，猫的原型对象现在可以这样写，

JavaScript代码
  1. function Cat(name,color){    
  2. 　　　　this.name=name;   
  3. 　　　　this.color=color;   
  4. 　　}    

我们现在就可以生成实例对象了。

JavaScript代码
  1. var cat1 = new Cat("大毛","黄色");    
  2. 　　var cat2 = new Cat("二毛","黑色");   
  3. 　　alert(cat1.name); // 大毛   
  4. 　　alert(cat1.color); // 黄色  

这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数。

JavaScript代码
  1. alert(cat1.constructor == Cat); //true    
  2. alert(cat2.constructor == Cat); //true  

Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。

JavaScript代码
  1. alert(cat1 instanceof Cat); //true    
  2. alert(cat2 instanceof Cat); //true  

4. 构造函数模式的问题

构造函数方法很好用，但是存在一个浪费内存的问题。

请看，我们现在为Cat对象添加一个不变的属性"type"（种类），再添加一个方法eat（吃老鼠）。那么，原型对象Cat就变成了下面这样：

JavaScript代码
  1. function Cat(name,color){    
  2. 　　　　this.name = name;   
  3. 　　　　this.color = color;   
  4. 　　　　this.type = "猫科动物";   
  5. 　　　　this.eat = function(){alert("吃老鼠");};   
  6. 　　}  

还是采用同样的方法，生成实例：

JavaScript代码
  1.    var cat1 = new Cat("大毛","黄色");    
  2. 　　var cat2 = new Cat ("二毛","黑色");   
  3. 　　alert(cat1.type); // 猫科动物   
  4. 　　cat1.eat(); // 吃老鼠    

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

JavaScript代码
  1. alert(cat1.eat == cat2.eat); //false  

能不能让type属性和eat()方法在内存中只生成一次，然后所有实例都指向那个内存地址呢？回答是可以的。

5. Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

JavaScript代码
  1. function Cat(name,color){    
  2. 　　　　this.name = name;   
  3. 　　　　this.color = color;   
  4. 　　}   
  5. 　　Cat.prototype.type = "猫科动物";   
  6. 　　Cat.prototype.eat = function(){alert("吃老鼠")};    

然后，生成实例。

JavaScript代码
  1. var cat1 = new Cat("大毛","黄色");    
  2. var cat2 = new Cat("二毛","黑色");   
  3. alert(cat1.type); // 猫科动物   
  4. cat1.eat(); // 吃老鼠  

这时所有实例的type属性和eat()方法，其实都是一个内存地址，指向prototype对象，因此就提高了运行效率。

JavaScript代码
  1. alert(cat1.eat == cat2.eat); //true   

6. Prototype模式的验证方法

6.1 isPrototypeOf()

这个方法用来判断，某个proptotype对象和某个实例之间的关系。

JavaScript代码
  1. alert(Cat.prototype.isPrototypeOf(cat1)); //true    
  2. alert(Cat.prototype.isPrototypeOf(cat2)); //true   

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

JavaScript代码
  1. alert(cat1.hasOwnProperty("name")); // true    
  2. alert(cat1.hasOwnProperty("type")); // false  

6.3 in运算符

in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

JavaScript代码
  1. alert("name" in cat1); // true    
  2. alert("type" in cat1); // true  

in运算符还可以用来遍历某个对象的所有属性。

JavaScript代码
  1. for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }   

 

]]> http://www.rainweb.cn/article/306.html <![CDATA[jQuery高亮显示文本中重要的关键字]]> Rainweb@163.com(rainweb) Fri,28 May 2010 15:43:55 +0800 http://www.rainweb.cn/default.asp?id=306 很久没有更新了，工作忙，还有就是前端的一些效果，基本在Rainweb上面都找得到了，期待更新的。。。

网页中往往有些特殊的关键字，要引起用户的注意，先看下demo效果

 

demo地址：http://www.rainweb.cn/JavaScript/fadefocus/index.html

 

实现原理：

将要高亮显示的文字加上段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于文字内容之上（z-index属性），使用Jquery给段落动态添加样式类。

CSS，html代码就不说了，直接解释下jquery代码：

Javascript代码
  1. jQuery(document).ready(function($) {   
  2.     // mask source 控制mask的动画效果    
  3.     var maskSource = jQuery('.mask');    
  4.     jQuery('.entity-results').hover(function() {     
  5.         maskSource.animate({opacity:0.7},1).fadeIn('750');    
  6.     }, function() {   
  7.         maskSource.fadeOut('1000');    
  8.     });   
  9.     
  10.     // match hover 控制段落的高亮显示   
  11.     var sample1 = jQuery('span.d1');   
  12.     var sample2 = jQuery('span.d2');   
  13.     var sample3 = jQuery('span.d3');    
  14.     jQuery('a.d1').hover(function() {    
  15.         sample1.addClass('show');   //给段落添加类    
  16.     }, function() {    
  17.         sample1.removeClass('show'); //移除段落类    
  18.     });   
  19.   
  20.     jQuery('a.d2').hover(function() {    
  21.         sample2.addClass('show');     
  22.     }, function() {     
  23.         sample2.removeClass('show');   
  24.     });   
  25.   
  26.     jQuery('a.d3').hover(function() {     
  27.         sample3.addClass('show');     
  28.     }, function() {     
  29.         sample3.removeClass('show');   
  30.     });    
  31. });   

 

动画函数animate(params, [duration], [easing], [callback])

Params：一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)：种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing (可选)：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback (可选)：在动画完成时执行的函数 

 

淡入效果函数：fadeIn(speed, [callback])

Speed：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (可选)：(Optional) 在动画完成时执行的函数 

 

 淡出效果函数：fadeOut解释同fadeIn

 

下载演示

]]> http://www.rainweb.cn/article/305.html <![CDATA[Jquery幻灯片轮换—focusbox]]> Rainweb@163.com(rainweb) Tue,18 May 2010 13:59:06 +0800 http://www.rainweb.cn/default.asp?id=305

 

幻灯片轮换展现着页面重要信息，一个独特并富有创意幻灯效果总是常常吸引着我。它包含着设计师的想象力和前端制作者的巧妙处理手法。虽然幻灯片的效果已很是很多了，但是这个有它特殊的地方吸引着我，跟大家分享一下。 

特点
  1. 输出循环图片列表即可；    
  2. 鼠标移进幻灯片时停止自动切换；    
  3. 左右按钮进行切换调整；    
  4. 右下角小点按钮可切换，切换后有直观进度反映；    
  5. 自动切换有右上角有进度Loading反映(偶最喜欢);    

 

使用说明：

XML/HTML代码
  1. <div id="rotator" class="rotator">  
  2.     <a class="btn prev" href="#prev">previous</a>  
  3.     <a class="btn next" href="#next">next</a>  
  4.     <div class="rotator_cont">  
  5.         <div class="loader"><div id="loader_pic" class="loader_pic"></div></div>  
  6.         <ul>  
  7.             <li><a href="http://rainweb.cn/1/"><img src="images/pic/pic_1.jpg" alt="" /></a></li>  
  8.             <li><a href="http://rainweb.cn/2/"><img src="images/pic/pic_2.jpg" alt="" /></a></li>  
  9.             <li><a href="http://rainweb.cn/3/"><img src="images/pic/pic_3.jpg" alt="" /></a></li>  
  10.             <li><a href="http://rainweb.cn/4/"><img src="images/pic/pic_4.jpg" alt="" /></a></li>  
  11.             <li><a href="http://rainweb.cn/5/"><img src="images/pic/pic_5.jpg" alt="" /></a></li>  
  12.         </ul>  
  13.     </div>  
  14.     <div class="overlay"></div>  
  15. </div>  
JavaScript代码
  1. $(function(){   
  2.     focusBox('rotator');   
  3. })  

 

查看演示    下载地址

]]> http://www.rainweb.cn/article/304.html <![CDATA[两题前端开发工程师面试题]]> Rainweb@163.com(rainweb) Wed,12 May 2010 10:17:49 +0800 http://www.rainweb.cn/default.asp?id=304 1. 用 CSS 实现布局

让我们一起来做一个页面

首先，我们需要一个布局。

请使用 CSS 控制 3 个 div，实现如下图的布局。

 

这题不难，在平时项目开发过程中也经常会碰到：

主要考虑几个问题：1. IE6 的 3 像素 BUG；2. 清楚浮动；

CSS代码
  1. div{background:#CCCCCC;}       
  2. #first{float:left;width:100px; height:150px}       
  3. #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}      
  4. #third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}    
XML/HTML代码
  1. <div id="first"></div>  
  2. <div id="second"></div>  
  3. <div id="third"></div>  

 

查看演示

 

2. 用 javascript 优化布局

由于我们的用户群喜欢放大看页面

于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25%，

并且其他的区块仍然固定不动。

 

提示：

也许，我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码，包括曾经你自己写的。

关键字：javascript、封装、复用

惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；

所以样式改成了这样

CSS代码
  1. body{ margin:0; padding:0}   
  2. div{background:#CCCCCC; position:absolute}   
  3. #first{width:100px; height:150px}   
  4. #second{top:160px;width:100px;height:150px}   
  5. #third{ width:200px; height:310px; left:110px}   

 

javascript 要考虑封装、复用

JavaScript代码
  1. function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）   
  2. var obj=document.getElementById(id); // 获取元素对象值   
  3. var dW=obj.clientWidth; // 获取元素宽度   
  4. var dH=obj.clientHeight; // 获取元素高度   
  5. //var oTop=obj.offsetTop;   
  6. //var oLeft=obj.offsetLeft;   
  7. obj.onmouseover=function(){ // 鼠标移入   
  8. this.style.width=dW*x+"px"; // 横向缩放   
  9. this.style.height=dH*y+"px"; // 纵向缩放   
  10. this.style.backgroundColor="#f00″; // 设置调试背景  
  11. this.style.zIndex=1; // 设置z轴优先  
  12. }  
  13. obj.onmouseout=function(){ // 鼠标移出，设回默认值  
  14. this.style.width="";  
  15. this.style.height="";  
  16. this.style.padding="";  
  17. this.style.backgroundColor="";  
  18. this.style.zIndex="";  
  19. }  
  20. }  
  21. zoom("first",1.25,1.25);  
  22. zoom("second",1.25,1.25);  
  23. zoom("third",1.25,1.25);    

 

查看演示

]]> http://www.rainweb.cn/article/303.html <![CDATA[HTML5动画(HTML5 Video Destruction)]]> Rainweb@163.com(rainweb) Wed,12 May 2010 09:19:04 +0800 http://www.rainweb.cn/default.asp?id=303

演示地址(请使用伟大的Firefox浏览器或Chrome) 开始以为真的是html5+Canvas+javascript做的逐帧动画，被吓到了，这效果直逼3D动画，后来看了一下源代码，原来是视频文件，只不过使用了html5标签以及Canvas+Javascript的特效，不过效果真的很不错的，这个与flash播放器比，还真有分量的。
 

相关代码：
 

XML/HTML代码
  1. <div style="display:none">  
  2.   
  3.         <video id="sourcevid" autoplay="true" loop="true">  
  4.             <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>  
  5.             <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>  
  6.         </video>  
  7.         <canvas id="sourcecopy" width="640" height="360"></canvas>  
  8. </div>  

 

]]>