三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

  mouseenter/mouseleave事件和delegate方法的实现 作者:Neoxone    发表时间: 2011年12月18号,星期天     阅读:16,685 次  

众所周知,事件onmouseover和onmouseout有一个极其不好的问题,就是在绑定元素内部的子元素上滑动会反复触发事件,及执行绑定的方法。

而ie在很早的时候有提供了另一对事件:mouseenter和mouseleaver。顾名思义,就是只有当mouse滑进滑出绑定元素的时候,才会触发。

但是,这本来只是ie的私有属性,虽然已属于DOM3 Event草案当中,其他浏览器的支持率并不是很高,目前看来,Opera11.10已提供支持,而Firefox到10.0会提供支持,Webkit的暂无消息。
所以,如果想要用,我们得自己动手。

先搞一个通用的事件绑定函数:

  1. var addEvent = function( target,type,fn ) {
  2.     if(target.addEventListener)
  3.     {
  4.         target.addEventListener(type,fn,false);
  5.     }
  6.     else if(target.attachEvent)
  7.     {
  8.         target.attachEvent("on" + type,fn);
  9.     }
  10. };
  11. var removeEvent = function(target,type,fn ) {
  12.     if(target.addEventListener)
  13.     {
  14.         target.removeEventListener(type,fn,false);
  15.     }
  16.     else if(target.attachEvent)
  17.     {
  18.         target.detachEvent("on" + type,fn);
  19.     }
  20. };

我们的mouseenter/leave是通过mouseover/out来实现的,只需屏蔽mouseover/out在元素内部触发时的事件传播即可。

为了解除绑定,我们设计了一个events._mouseFn来保存绑定的方法,在解除操作时读取对应的方法进行解绑。因为事件可以绑定多个方法,我们需要保存对应的方法,以便之后对应解除。
当然如果这里如果按面向对象的思路实现,就可以各自保存,而不需要保持在同一个events._mouseFn对象下。但每绑定一个事件,都需实例化一个对象,显得很多余,所以不采用面向对象的模式。

接下来是文章的第二部分,我们来实现下jquery中提供的delegate方法。
(delegate是live方法的扩展版。delegate是基于live的,live是基于bind的。在jquery1.7中又被封装进了on方法。1.7中的on方法是一个很辽阔的方法。其实封装的越厉害,效率就越差了,这也是为什么我们选择自己做简单封装的原因,而不是使用jquery已封装好的)。
这个方法可以将想要绑定在子级元素上的事件方法,委托绑定在其父级上,用事件传播机制来触发执行。
这么做的好处有:
1:如果子级有n个并列元素需要绑定,绑子级需要绑n次,而将其绑定在父级上则只需绑定一次,这是很高效的。
2:如果子级元素有动态增加的话,新增元素是没有绑定过任何事件方法的。而如果之前选择的是绑定其父级,就不会有这个问题。

这里的实现思路是这样的:如果触发事件的元素,是你想要绑定的元素的子级(当然他肯定已是委托实际绑定元素的子级),就执行绑定的事件方法,否则方法就不执行,看上去就像方法没绑定过一样。
同实现onmouseenter一样,我们也设计了一个events._deleFn来用于后面的解绑方法undelegate的实现。
另外针对ie,我们还解决了两个问题:
1. 绑定方法内的this指向问题。我们用.apply执行绑定方法来解决。
2. 使用apply调用绑定方法,就必须考虑如何解绑方法。原理和_mouseFn还有_deleFn一样。

在使用delegate时,我们同样遇到了mouseover/out的问题。
我们的解决方案是:不罗嗦,直接将mouseover/out处理成mouseenter/leave

最后,整理一下,封装一个支持mouseenter 和 mouseleave事件,delegate方法 及其他们的解除绑定的方法的 功能函数库。

  1. window.events = {}
  2. events._deleFn = {}; //保存delegate所绑定的方法   
  3. events._mouseFn ={}; //保存“onmouseenter”和“onmouseleave”所绑定的方法
  4. events._ieFunc = {}; //由于保存在ie下绑定的方法
  5.  
  6. events._mouseHandle = function(fn){
  7.     /* 实现mouseenter/leave 的转换方法,符合条件时才会执行 */
  8.     var func = function(event){
  9.         var target = event.target;
  10.         var parent = event.relatedTarget; //在onmouseover/out操作中,相关的另一个节点
  11.         while( parent && parent != this ){ 
  12.             try{ parent = parent.parentNode; }
  13.             catch(e){break;}
  14.         }
  15.         /* 只有当相关节点的父级不会是绑定的节点时(即二者不是父子的包含关系),才调用fn,否则不做处理 */
  16.         ( parent != this ) && (fn.call(target,event));
  17.     };
  18.     return func;
  19. }
  20.  
  21. events._delegateHandle = function(obj,selector,fn){
  22.     /* 实现delegate 的转换方法,符合条件时才会执行 */
  23.     var func = function(event){
  24.         var event = event || window.event;
  25.         var target = event.srcElement || event.target;
  26.         var parent = target;
  27.         function contain(item,elmName){
  28.             if(elmName.split('#')[1]){ //by id
  29.                 if(item.id && item.id === elmName.split('#')[1]) return true;
  30.             } 
  31.             if(elmName.split('.')[1]){ //by class
  32.                 if(hasClass(item, elmName.split('.')[1])) return true;
  33.             }
  34.             if(item.tagName == elmName.toUpperCase())  return true; //by tagname
  35.             return false;
  36.         }
  37.  
  38.         while(parent){
  39.             /* 如果触发的元素,属于(selector)元素的子级。 */
  40.             if(obj == parent) return false; //触发元素是自己
  41.             if(contain(parent,selector)){
  42.                 if(event.type == 'mouseover' || event.type == 'mouseout'){
  43.                     /*
  44.                     * 将mouseover/out直接处理成mouseenter/leave: 事件相关元素不属于绑定元素的子级,才绑定方法
  45.                     */
  46.                     //事件相关元素。ie下使用toElement和fromElement,其他用relatedTarget。
  47.                     var related = event.relatedTarget || ((event.type == 'mouseout') ? event.toElement : event.fromElement);
  48.                     if(contain(target,selector) || contain(related,selector)) {
  49.                         /* 如果,触发元素或相关元素属于绑定元素(selector)。执行方法 */
  50.                         fn.call(obj,event);
  51.                         return;
  52.                     }
  53.                     while( related && !contain(related,selector)){ 
  54.                           related = related.parentNode;
  55.                     }
  56.                     /* 事件相关元素,不属于绑定元素(selector)的子级,执行方法  */
  57.                     !contain(related,selector) && (fn.call(obj,event));
  58.                 }else{
  59.                     fn.call(obj,event);
  60.                 }
  61.                 return;
  62.             }
  63.             parent = parent.parentNode;   
  64.         }
  65.     };
  66.     return func;
  67. };
  68.  
  69. events.addEvent = function(target,type,fn){
  70.     if (!target) return false;
  71.     var add = function(obj){
  72.         if(obj.addEventListener){   
  73.             if(obj.onmouseenter !== undefined){
  74.                 //for opera11,firefox10。他们也支持“onmouseenter”和“onmouseleave”,可以直接绑定
  75.                 obj.addEventListener(type,fn,false)
  76.                 return ;
  77.             }
  78.             if(type=="mouseenter" || type=="mouseleave" ){ 
  79.                 var eType = (type=="mouseenter") ? "mouseover" : "mouseout";
  80.                 var fnNew = events._mouseHandle(fn);
  81.                 obj.addEventListener(eType,fnNew,false);
  82.                  /* 将方法存入events._mouseFn,以便以后remove */
  83.                 if(!events._mouseFn[obj]) events._mouseFn[obj] = {};
  84.                 if(!events._mouseFn[obj][eType]) events._mouseFn[obj][eType] = {};
  85.                     events._mouseFn[obj][eType][fn] = fnNew;
  86.             }else{
  87.                 obj.addEventListener(type,fn,false);
  88.             }
  89.         }else{
  90.             // for ie
  91.             if(!events._ieFunc[obj]) events._ieFunc[obj] = {};
  92.             if(!events._ieFunc[obj][type]) events._ieFunc[obj][type] = {};
  93.             events._ieFunc[obj][type][fn] = function(){
  94.                 fn.apply(obj,arguments);
  95.             };
  96.             obj.attachEvent("on" + type,events._ieFunc[obj][type][fn]);
  97.         }
  98.     }
  99.     if(isDOMs(target)) {
  100.         for(var i=0, l = target.length; i < l; i++){
  101.             add(target[i])
  102.         }
  103.     }else{
  104.         add(target);
  105.     }
  106. };
  107.  
  108. events.removeEvent = function(target,type,fn) {
  109.     if (!target) return false;
  110.     var remove = function(obj){
  111.         if(obj.addEventListener){   
  112.             if(obj.onmouseenter !== undefined){
  113.                 obj.removeEventListener(type,fn,false)
  114.                 return ;
  115.             }
  116.             if(type=="mouseenter" || type=="mouseleave" ){ 
  117.                 var eType = (type=="mouseenter") ? "mouseover" : "mouseout";
  118.                 if(!events._mouseFn[obj][eType][fn]) return;
  119.                 obj.removeEventListener(eType,events._mouseFn[obj][eType][fn],false);
  120.                 events._mouseFn[obj][eType][fn]={};
  121.             }else{
  122.                 obj.removeEventListener(type,fn,false);
  123.             }
  124.         }else{
  125.             //for ie
  126.             if(!events._ieFunc[obj] ||!events._ieFunc[obj][type] || !events._ieFunc[obj][type][fn]) return;
  127.             obj.detachEvent("on" + type, events._ieFunc[obj][type][fn],false);
  128.             events._ieFunc[obj][type][fn]={};
  129.         }
  130.     }
  131.     if(isDOMs(target)) {
  132.         for(var i=0, l = target.length; i < l; i++){
  133.             remove(target[i])
  134.         }
  135.     }else{
  136.         remove(target);
  137.     }
  138. };
  139.  
  140. events.delegate = function(obj,selector,type,fn){
  141.     if (!obj || !selector) return false;
  142.     var fnNew = events._delegateHandle(obj,selector,fn);
  143.     events.addEvent(obj,type,fnNew);
  144.     /* 将绑定的方法存入events._deleFn,以便之后解绑操作 */
  145.     if(!events._deleFn[selector]) events._deleFn[selector] = {};
  146.     if(!events._deleFn[selector][type]) events._deleFn[selector][type] = {};
  147.     events._deleFn[selector][type][fn] = fnNew;
  148. };
  149.  
  150. events.undelegate = function(obj,selector,type,fn){
  151.     if (!obj || !selector || !events._deleFn[selector]) return false;
  152.     var fnNew = events._deleFn[selector][type][fn];
  153.     if(!fnNew) return;
  154.     events.removeEvent(obj,type,fnNew);
  155.     events._deleFn[selector][type][fn] = null;
  156. };
   

  瀑布流布局及扩展——格子块的智能堆砌 作者:Neoxone    发表时间: 2011年10月12号,星期三     阅读:27,091 次  

图片分享网站Pinterest(beta),在不久前获得了2700$的投资,估值已超2亿元(据说现该公司团队有8人)。该网站的一大特色就是每一张分享的图片被拟作“Pin”被钉在页面上面,每一Pin依尺寸智能排列,同时滚动页面时异步加载新Pin,极具效果。这种创新模式被在国内也被广泛copy,其中最有前途的当属Mark之,以”Mark”代”Pin”,也算有些想法。

以下是利用豆瓣API数据做的效果:完整效果
部分代码:

这种布局中虽然每个Pin的高度不尽相同,但是他们的宽度都是一样的。
那么假如,很邪恶的提出一个要求,宽度也不尽相同,只是说宽高都按比例成倍增加,那还怎么排列呢?
呵呵,如下:

现在这种布局已经不能叫瀑布流了,我们称之为格子块,格子块通过算法智能堆砌。

到最后,说点下睛也好,说添下足也好,我们再加一个拖动交换格子的效果。

   

  Typing… 作者:Neoxone    发表时间: 2011年07月28号,星期四     阅读:7,433 次  

最近一个多月都比较忙,没什么时间精力更新blog,现在终于闲下来了。
之前有个朋友发给我一个打字机的效果,蛮有感觉的,不过那是用VBscript写的…
而下面的这个demo里除了打字的效果,还结合了以前这个:我是谁里的效果。
至于里面的心形图案,是我一个一个取出坐标得到的,如果你对心形图案还有兴趣,还可以看看这篇文章笛卡尔情书的秘密

   

  烟花易冷,青春难留 作者:Neoxone    发表时间: 2011年06月26号,星期天     阅读:5,297 次  

繁华声,遁入空门,折煞了世人
梦偏冷,辗转一生,情债又几本
如你默认,生死枯等
枯等一圈,又一圈的年轮
浮屠塔,断了几层,断了谁的魂
痛直奔,一盏残灯,倾塌的山门
容我再等,历史转身
等酒香醇,等你弹一曲古筝

用周杰伦的一首《烟花易冷》,纪念我即刻逝去的青春。

   

  Google电吉他扩展版——可智能识别曲谱 作者:Neoxone    发表时间: 2011年06月19号,星期天     阅读:19,269 次  

姗姗来迟,还请见谅。
在6月9号Google 放出的纪念电吉他之父莱斯·保罗 96 周年诞辰的电吉他Doodle代码上,扩展了这个可播放曲谱的版本。
做这个扩展版的初衷是为了方便不是很熟悉键盘的童鞋。
童鞋们可以从网上复制曲谱进来自动播放(如果读者能自己谱曲,那真的就太棒了)。
曲谱中的空格及所有非法字符都表示停顿,间隔越大表示停顿越长,也可以调整曲子的整体节奏快慢。
同时可以开启自带的录音功能,录制之后会生产网址,可以拿来同朋友分享(由于国内网络环境的问题,网址生产可能会有限滞后)。
代码方面删除了不相干的部分,并做了格式整理,但由于原代码是经过压缩的,所以阅读起来还是会很费力的,很多地方处理的挺复杂,能力有限也不便做代码分析。
以下就是全部的代码(24k的code,1张图片,1个声音的flash文件):

可以运行以上代码,也可以访问这个链接:http://cssass.com/blog/resource/guitar/

最后罗列一些网上流传的曲谱:
欢乐颂:

uuiooiuyttyuuyy uuiooiuyttyuytt yyutyuiutyuiuytyw uuiooiuyttyuytt

爱情买卖:

3688368 77653 2226235 37753 3688368 00989 00989987 53566

茉莉花:

eetyiiyttyt eetyiiyttyt tttetyyt ewetewqqwq ewqwetyit ewetewqqwq

义勇军进行曲:

qr rrrqwer r yrtyi i yyryiytt o i t y iy iytyr y qwrryyiittw t qr ry yi rtiio i yriiiy r q r yriiiy r q r q r q r r

沧海一声笑:

pouyt uytew wewetyuopppou

童年:

35553 6676 66588886865 355536676 66658888668 9~

上海滩:

356666,352222,356865132

一闪一闪亮晶晶

1155665 4433221 5544332 5544332 1155665 4433221;

天空之城

6787807 365685 254573 874477 6787807 365685 34878908 876756 1232352
5878007 678789855 43213 376321 21253 376321 21276

春江花月夜

H-HHK-LHG~G-G-H-KLD~D-SDG-DGH~KL-;-K-L;LKH-G~

隐形的翅膀

358787 6568321 11186532122 358787 6568321 1118653211

可以复制曲谱到文本框中直接播放。欢迎读者提供更精彩的乐谱。