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

  种花 作者:Neoxone    发表时间: 2011年01月24号,星期一     阅读:9,487 次  

一片两片三四片,
五片六片七八片,
九片十片十一片,
花开彼岸难相见。

前回植树,今日种花。
(如果你用的是firefox,chrome,safari,opera或者是ie9浏览器,你就能见到我的花儿了)

   

  植树 作者:Neoxone    发表时间: 2011年01月21号,星期五     阅读:3,851 次  

在闪吧看见一棵树,移植到canvas+javascript里来。

用setInterval让它动起来

补充:
除了setTimeout/setInterval这两个函数控制动画外。现在很多浏览器还提供了另一个函数requestAnimationFrame,这个函数接口所拥有的优势是:

对于一个侦中对DOM的所有操作,只进行一次Layout和Paint。
如果发生动画的元素被隐藏了,那么就不再去Paint。

不过这个方法的使用只类似于递归调用,并没有一个时间停顿,所以我们一般要根据记录时间间隔来决定动画的每一帧的绘制情况。
下面用requestAnimationFrame来完成上面的动画。由于requestAnimationFrame的兼容性,我们需要先写一个兼容性的方法(来自three.js):

  1. (function() {
  2.     /* 兼容requestAnimationFrame */
  3.     var lastTime = 0;
  4.     var vendors = ['ms', 'moz', 'webkit', 'o'];
  5.     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  6.         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  7.         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
  8.                                    || window[vendors[x]+'RequestCancelAnimationFrame'];
  9.     }
  10.     if (!window.requestAnimationFrame)
  11.         window.requestAnimationFrame = function(callback, element) {
  12.             var currTime = new Date().getTime();
  13.             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  14.             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  15.               timeToCall);
  16.             lastTime = currTime + timeToCall;
  17.             return id;
  18.         };
  19.  
  20.     if (!window.cancelAnimationFrame)
  21.         window.cancelAnimationFrame = function(id) {
  22.             clearTimeout(id);
  23.         };
  24. }());
   

  offsetLeft/Top Bug in Firefox 作者:Neoxone    发表时间: 2011年01月17号,星期一     阅读:4,108 次  

之前在这篇文章offsetX/Y for Firefox中有顺带提到ie6,ie7对于offsetLeft的不标准行为。

obj.offsetLeft是相对与“offsetParent”的距离,按标准应该是距其上级中定位元素的距离(如果不存在这个元素,则相对于整个页面文档)。
而对于ie6,ie7,obj.offsetLeft是相对其直接父级的距离——显然他们没有遵循标准。

而今天提到的兼容问题则要归咎于firefox的不合群。

当子级相对于父级绝对定位,而父级又有这两个属性:overflow:hidden; border:10px solid #999;时,
在firefox看来,子级的offsetLeft就需要再减去border值。很怪异的解释。

   

  我是谁 作者:Neoxone    发表时间: 2010年12月31号,星期五     阅读:7,618 次  

下面的代码里隐藏着一个秘密。
这个秘密将会告诉你我是谁!

其实,以上DEMO,代码基本上都来自 Román Cortés,就是那个只用了1K字符写出3D圣诞树的家伙。

附:

新年来临,这篇博文也就是我2010年的关门之作。
祝大家新的一年里新年新气象。

   

  《ie9大风车》与《忍者镖》 作者:Neoxone    发表时间: 2010年12月27号,星期一     阅读:6,028 次  

其实这是一个AD帖,
几星期前参加ie9开发大赛做了一个《ie9大风车》(呃,我承认名字很挫)。
然后,嗯,你懂的…
投票地址:http://ie9.onlinevoc.cn/contest/PercodPage.aspx?ID=41

这个小玩意的难度在于,里面的所有东西都不是图片,而是用canvas写的,之前写的贝塞尔曲线的可视化操作实现倒是帮了大忙,不过据说AI已有插件直接导出canvas绘图代码了,那我的手写代码的生产力就太落后了。

支持的浏览器包括ie9,firefox,chrome,safari。在opera下有个bug,暂时无法修复。

(如果点击运行不对,可以试试刷新下,或者copy到你自己的本机上打开。当然,别用ie9以下的浏览器!)

下面是另一个玩意《忍者镖》,话说是受了这个大赛(http://js1k.com/2010-first/demos)的刺激才写的。
在这个大赛里,所有的Demo都必须小于1KB。

于是,我就把我的代码往死里压。从这样:

斩头去尾,挖心掏肺,搞成这样:

结果,我的文件大小依然超出1KB,不得不佩服那些1KB Demos啊,个顶个的又小又炫。