CSSASSCSSASSCSSASS

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

嗨,塞林格,我看了你的《麦田守望者》

作者:ONEBOYS    发表时间: 2010年02月28号,星期天     阅读:40 次

    谁要是有塞林格在天堂的电话,请一定要告诉我,我真想打个电话向他说声我拜读了你的《麦田》,我想说你剽窃了我的一些想法——开个玩笑罢了,我知道你是开得起玩笑的。我有时候经常胡思乱想,这个症状总有上百年了吧,我是诧异老霍尔顿也有这个症状,如果你还和老霍尔顿有联系,请代我向他问好。

    你要是让我在几十年前就能有机会,我是说不管是闲情雅致的,还是消遣时间的,总之是能够让我看到这本书,哪怕是瞥到那么一个开头,我觉得我一定会死命的读上一千遍——我不是说我现在读它的时候没有死命的读,我只是没能读上个一千遍,因为你也知道,我的现在的工作不是读书,我的混账工作是挣钱呢——嘿,我估计我当时说不准也会想着计划到哪个破麦田里去做个傻里傻气的守望者,不骗你,我会的,我估计在几十年前那个时候我会的,只要能有这样的地方。

    可惜根本没他妈的这种地方,是吧,哪里会只有无忧无虑的小孩呢,哪里会只有小孩而只有你一个大人呢,哪里会有小孩无忧无虑却允许你一个大人混在他们里面的。你也知道没这种混账的好地方,霍尔顿也知道没这种的地方,这样他才想着到西部随便什么地方去,一个人,也不带上老菲比——那是个多可爱聪明又单纯有意思的小女孩啊,他不就想在麦田里当孩子们的守望者吗?——随便找个什么工作的——也不谈什么守望者的工作了。所以说大家都知道,根本没这种狗屁地方,也根本没这种混账工作,到麦田里的守望者都是说给自己听的鬼话罢了——或许只有我一个人在偶然的瞬间里当真了。

    假如真没有什么麦田守望者的岗位,我也可以先随便找个什么没有人认识的狗屁地方,找个随便什么的混账工作。说到混账工作,能有什么工作不混账呢,每天都是浑浑噩噩的消磨时间,每天都是假模假式的面对别人,提起来就能腻死一个人。所以我也可以按霍尔顿那么打算,我可以每天不说话,装成又聋又哑的,当别人问你你也别说,这样久了,别人也就以为你是个又聋又哑的。你说我这样是逃避?哦,你真是冤枉死我了,如果你走在一条让人作呕的狗屎路上,你难道不避开吗?我不是说所有路都是狗屎的,我也正在找一条没有狗屎的路呢。相信我,有这样的路我干嘛还要避着走呢。可怜的霍尔顿当时没走成,我真替他难过,我要是在那,我真的想过去安慰他。尽管我自己也没走成。

    但是,到了现在,要是有人说让你走,你走不走?我绝对想殴他,我不冤枉他,我对天发誓他是在挖坑害我。没有钱,没有地图,没有没狗屎路的过路票,我想我都会一直走到狗屎堆里去,他就是这个目的,让我走的那个家伙。还是安多里尼先生的告诫说的不错,他说的是“一个不成熟的男人的标志是他愿意为某种事业英勇的死去,一个成熟男人的标志是他愿意为某种事业卑贱地活着。”感谢安多里尼先生的总结,我终于找到了适合自己的狗屎事业,虽然很微小,但适合我,我可以都不需要怎么说话,因为我现在的工作是整天敲代码,我和代码交流,你知道要是我和代码说着话,大家都会以为我疯了——不过我们的确在交流,不带假模假式的,我为了它卑贱并快乐着,甚至都有些热爱。很荣幸我成为了一个成熟的男人。

    塞林格,一个成熟的男人向你问午安,我是很真诚很真诚的,不带任何假模假式的。

简单效果——地图移动

作者:ONEBOYS    发表时间: 2010年01月29号,星期五     阅读:105 次

记得上回弄的简单文字滚屏效果,无缝滚动字幕
其实应用的地方还是蛮多的。我们也可以做个简单的地图移动效果。

  1. var $id=function(id){ return document.getElementById(id);}
  2. var map={
  3.     locked:0,
  4.     initial:function(){         //初始图片位置为居中
  5.         $id('albumRoll').scrollLeft=($id('albumList').scrollWidth-$id('albumRoll').offsetWidth)/2;
  6.         $id('albumRoll').scrollTop=($id('albumList').scrollHeight-$id('albumRoll').offsetHeight)/2;
  7.     },
  8.     scroll:function(othis){
  9.         if (map.locked==0){    
  10.             var x=0,y=0;   
  11.             if(othis.id=='rollUp'){
  12.                 y=2//滚动向量(上2)
  13.             }
  14.             if(othis.id=='rollDown'){
  15.                 y=-2;
  16.             }
  17.             if(othis.id=='rollLeft'){
  18.                 x=2;  
  19.             }
  20.             if(othis.id=='rollRight'){
  21.                 x=-2;
  22.             }
  23.             roll = setInterval(function(){
  24.                 $id('albumRoll').scrollLeft+=x;
  25.                 $id('albumRoll').scrollTop+=y;       
  26.             }, 5);
  27.             map.locked=1;
  28.         }
  29.     },
  30.     stop:function (){
  31.         if (roll){
  32.             clearInterval(roll);
  33.             map.locked = 0;
  34.         }}   
  35. }

简单效果——滚动展示

作者:ONEBOYS    发表时间: 2010年01月29号,星期五     阅读:85 次

上回的文章里提到了文字滚屏效果。是无限滚动下去的。
现在弄一个可控制的单步滚动效果。

  1. var scrollHori={
  2.     locked:0//锁死
  3.     vector:0//左右向量
  4.     start:function(thiso){
  5.         if (scrollHori.locked == 0){
  6.             if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) {  //按到往左按钮,且在左侧有内容
  7.                 scrollHori.vector = -5;
  8.                 scrollHori.scroll();
  9.             }
  10.             if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){     //按到往右按钮,且在右侧有内容
  11.                 scrollHori.vector = 5;   
  12.                 scrollHori.scroll()
  13.             } 
  14.         }
  15.     },
  16.     scroll:function(){
  17.         var step=0;
  18.         var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length;  //单个内容总宽(包括margin)
  19.         play = setInterval(function(){
  20.                 if(size>step){   //单步滚动
  21.                     $id('rollBox').scrollLeft+=scrollHori.vector;
  22.                     step+=Math.abs(scrollHori.vector);
  23.                     scrollHori.locked = 1;   //滚动的时候锁死
  24.                 }
  25.                 else{
  26.                     scrollHori.stop();
  27.                 }
  28.             }, 5);
  29.     },
  30.     stop:function(){
  31.         if (window.play) {
  32.             clearInterval(window.play);   //清除反复
  33.             scrollHori.locked = 0;   //开锁
  34.         }
  35.     }
  36. }

竖排的话可以省力很多。
(不过下面的效果本来就更简单)

通灵谬言,未满25岁者必看。教训啊

作者:ONEBOYS    发表时间: 2010年01月8号,星期五     阅读:231 次

余年已二十有五,逾月即将本命之年。所叹者红颜未得,知己难求,东隅已逝,宏图空有。
近日得闻“《资治通鉴.梁纪》(第二十卷)有记——‘凤历五年,时洛隐者为帝卜之,曰逾二十五年未房者通灵’”。初想以身试法,一探通灵之境。然查阅《资治通鉴》,竟现谬误有三:
一谬于《资治通鉴》卷二十实为《汉纪》,卷一四五至卷一六零乃为《梁纪》,而凤历年只记于《后梁纪》卷二六八,前后梁全无干系。以谬加谬,盖为始作俑者故意为之。
二谬于凤历始于癸酉年(913年)正月甲子,废于当年二月庚寅。废立之间不足两月,“凤历五年”何从谈起?
三谬于郢王朱友圭杀父篡位之辈,荒淫无能之徒,根基不固,乾坤难控,篡居帝位未有一年即告覆灭,身死名废,被贬庶人。因而后史记之皆呼“郢王”,而不称之为“帝”。“为帝卜之”实乃大谬。
其实伪作史料者,应深知后梁历史,比如凤历之年,梁国都确在洛阳,“洛隐者为帝卜之”并不违地域常理。其他谬言,当其故意为之,一来令甄别者扑朔难查,二来盖其不敢篡改历史,故设之以馄饨虚空之年代人物,然后编造以事件。
网络之内信息庞杂,真假共存。吾人当自有判断,绝不可轻信谬论,倘若贻误终身,悔之晚矣。


尽管我觉得吧,通灵王魔法使之类的东西肯定是假的,但网球王子里海棠熏的snake回球,修炼的好的话,绝对是能打出来的。

浅谈辄止:line-height和vertical-align

作者:ONEBOYS    发表时间: 2010年01月5号,星期二     阅读:376 次

line-height可以应用在所有元素上。
但尽管line-height可以加在block元素上,实际起作用的却是内部的inline元素或textnode节点。

另外,line-height属性可继承。

非可置换inline元素没有height;每一行的高度就由line-height决定。
而对于可置换inline元素,他本身其实是有内在高度的,将不受line-height影响(ie7是个例外)。

但这点性质,似乎正在改变。
css2.1也如是说:对于block,inline-block(可置换inline元素就是天生的inline-block元素), line-height是做为其minimal height的。那当高度小于line-height时,是理应起作用的。
我们使用html5的doctype声明:

在上面的例子里,除了ie6,这里的line-height在其他浏览器都能起作用。
总之,单纯设置外层height=line-height使image等可置换元素垂直居中,在ie6下是行不通的——如果要考虑ie6,请记住这一点。
那么,如何才能做到inline元素(包括可置换inline元素)的垂直居中,并且推而广之应用在block元素上呢?我们可以利用vertical-align属性。

现在先摘要说下vertical-align属性。
在CSS Specification中,line-height属性和vertical-align属性就是放在一起做介绍的。
Line height calculations: the ‘line-height’ and ‘vertical-align’ properties

vertical-align的默认值是baseline;
与line-height不同,vertical-align只能用在inline元素(还有’table-cell’ 元素)上
vertical-align属性在各个浏览器下都有不少的差异。参见:http://www.mikkolee.com/13

不过,我们要用到的属性middle在各个浏览器解释中却没有什么差异(或只有微小的差异)。
让同行的inline元素按中间线对齐,我们给各个inline元素加上vertical-align:middle;

接着我们要相对外层做垂直居中。
假如,内部的一个inline元素(当然是可置换inline元素,或是设置了inline-block的元素——这二者其实是一样的)的高度也达到外层的高度,那么就可以保证内层所有的inline元素都垂直居中了。
所以我们可以设置这样一个空元素pillar。

是不是很熟悉啊,我们“未知尺寸元素的垂直居中”的一个方法就是从这里衍生而来的——那是针对block元素的居中:http://www.cssass.com/blog/index.php/2008/36.html
做法就是将block元素变成inline-block,或者干脆使用某一inline元素包住block元素(尽管这不符合标准),然后再使用上面的方法。

简单效果的简单写法——无缝滚动字幕

作者:ONEBOYS    发表时间: 2009年12月29号,星期二     阅读:237 次

先看看无缝滚动的效果,使用window的setInterval方法重复调用一个滚动函数。
关键的代码是

  1. function roll(){ 
  2.             if($$('box2').offsetTop-$$('wrap').scrollTop<=0)  {  //当滚动到第二部分的顶部位置时
  3.                 $$('wrap').scrollTop-=$$('box1').offsetHeight;      //重置至第一部分顶部位置,相当于$$('box').scrollTop=0;
  4.                 }
  5.             else{ 
  6.                 $$('wrap').scrollTop++ ;
  7.                 $$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop  //无他,参考值尔
  8.             } 
  9.         } 
  10. var start=setInterval(roll,speed);

而无缝的关键还在这里

  1. $$('box2').innerHTML=box1.innerHTML//拷贝一份内容跟随其后,使原内容之后还有内容

我原本要做的效果并非全如上面,我需要的效果是:单条为一步阶,进行间歇性循环无缝滚动

其实提起滚动,应该立马会想起走马灯(marquee)。尽管对其一直有偏见,但我还是会给他个机会的。。。

  1. function func(){
  2.         $$('quee').stop();
  3.         setTimeout(func2,1000);
  4.     }
  5.     function func2(){
  6.         $$('quee').start();
  7.         setTimeout(func,1000);
  8.     }

延时1秒交叉调用marquee的内置函数start()和stop();

不过,scrollamount影响的步阶不准确啊,而且不能做到无缝么。好,将marquee拖出去斩了(marquee:冤枉啊~~~~~)

下面是新的做法

  1. function roll(){
  2.         wrap.scrollTop++;
  3.          if($$('box1').offsetHeight-wrap.scrollTop>0){  //尚未滚动到第二部分的顶部位置时
  4.              if(wrap.scrollTop%wrap.offsetHeight!=0)  //
  5.              {
  6.                 return(setTimeout(roll,20));     //20毫秒即递归一次
  7.              }
  8.              else{                //当滚动的累计距离达到显示域高度的倍数时
  9.                 return(setTimeout(roll,2000))//等待2秒才递归调用
  10.              }
  11.          }
  12.          else{
  13.                 setTimeout("$$('wrap').scrollTop=0;roll()",2000);
  14.             }
  15.     }

运用递归,而没有用setInterval

1 / 1612345»...尾页 »