前言

不是图书控的我,鬼迷心窍的一心想做一本更加真实的网络书

从来没有试过冰糖橙子的我,神魂颠倒的取了诡异的博客名

断断续续,拖拖延延的做很久,墨迹了个半成品

总而言之2011,冰糖橙子将会更加努力

目录

Chrome扩展fight look

1 Comment

记得有一天我和锤锤在实验室看喵扑,看到一张倒立拍摄的图片,两个人都不约而同地扭转脖子去看,脖子都扭疼了,还是不能看清楚照片主角长什么样,就设想要是有这么一个可以扭转图片的小工具就太好了。刚好现在在家闲,看了一下chrome的API,做了这么一个扩展工具fight look。

安装fight look(前题是使用的google浏览器,听说FF现在也能用chrome的扩展所以在兼容上也作了FF的考虑)。

fight look

继续阅读:Chrome扩展fight look

生活-你不得不相信他的巧合

8 Comments

直到现在我还认为自己在做梦,那种感觉太美妙了.

昨天腾迅实习生的第一轮面试,也是我人生的第一次面试,太紧张了,很早起起来了,躺在床上了回想考虑了下怎么做自我介绍,同时也勾起了我关注学习web前端的历程,还记得08年第一次看Twinsen的文章《这将是一场革命》,看到那句我可能永远都忘不了的那句:

之所以我要纹上这段代码,我是要警惕自己——我的使命。并且我将用一生去拥抱我所热爱的事业。

我看到了页面重构工程师对工作的激情,积极地态度,推动web标准的责任,以及不断学习专业的精神。从哪个时候开始我喜欢上web前端,喜欢上了页面重构。我也想用我的一生去拥抱我热爱的事业。还记得他博客最后更新的一个Life说他到成都来招聘,不过已经是去年的文章,我转念一想会不会今天面我的是他呢,哪有那么巧的事。

继续阅读:生活-你不得不相信他的巧合

光之四战士 算十点计算器

5 Comments

这次又有一款作品加入了最终幻想的大家族,以外传形式登场的《光之四战士》,虽然已近发布了很久了,汉化也出了4个月了,我现在才玩起,当然画面就不说了NDS能有多好啊,但是他的纸娃娃系统做的很好,剧情也算曲折离奇,还有接近28个职业可以转职,可惜就是主线有点短了,接着就是收集各种转职的特殊隐藏职业了。其中有个算十点的小游戏,这个游戏和我们玩的二十一点很像,都是通过4个数字的四则运算得到最终结果10,如果3次PT点数能够达到250点以上就可以获得”兽使“这个职业,算十点倒不难,但是要通过PT点数拿高分就很困难了。
算十点计算器
PT点数怎么计算的呢,我举个例吧 1245这4个数字 得以得到  ((4+5)-1)+2=10

继续阅读:光之四战士 算十点计算器

差异化兼容FF的网页变灰

7 Comments

==================================================================
此段 :更新 2012 -08-14
W3C filter 规范的推出,想要更加便捷无脑完美的使网页变灰变成了可能。
目前webkit率先支持了此规范,chrome18,以及safari 6.0之后可以运行。
对于firefox我们可以用svg来做

  1.  
  2. -webkit-filter: grayscale(100%);
  3. filter: grayscale(100%);
  4. filter: url(desaturate.svg#grayscale);
  5. filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  6.  
  1.  
  2. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  3. <filter id="grayscale">
  4. <fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
  5. 0.3333 0.3333 0.3333 0 0
  6. 0.3333 0.3333 0.3333 0 0
  7. 0 0 0 1 0"></fecolormatrix>
  8. </filter>
  9. </svg>
  10.  

目前情况window平台下的safari 只到5.2的版本还不能支持到css3 filter,同opera还不支持,相信来未来不久能够真正完美的兼容网页变灰
==================================================================

网上所有的变灰代码无疑都是用IE的滤镜,只是IE的独有属性,如何在ff下面变灰呢?

第一种用canvas对图像进行处理,效率就不说了,因为canvas像素操作的安全限制,要求图片必须和页面在同域之下,并且对flash是没法处理的。

第二种方法对于专业网站,他们手动或者自动处理所用的图片,但是太麻烦了,虽然我的网站图片很少,批处理一下就搞定了,但是我很懒,有没有一步式的处理方法呢。

于是想到山寨的遮罩层,但是出现了一个问题,下面的元素却不能点击了,没关系““pointer-events”帮你忙,我们先看看关于他的介绍,

CSS pointer-events
原本来源于SVG,目前在很多浏览器中已经得到体现,默认它设置为auto,这是正常的行为,如果你已经设置属性值为none。它将不会捕获任何click事件,而是让事件穿过该元素到达下面的元素。

继续阅读:差异化兼容FF的网页变灰

淘宝首页广告轮换效果插件Oslide

10 Comments

最近有朋友问我淘宝首页的广告效果是怎么做的,淘宝slide的处理细节很细心,特点就在于最后一张图片切换到第一张的时候,看上去第一张是紧紧地更随在最后一张的后面,而不是类似通常的前滚动整个的slideDiv到达第一张图片,在没有人的干预下整个的滚动的流程就类似与跑马灯一直一个方向,就不会让浏览者会注意到某个区域产生很突兀的变化而引起不适,或者中断他的浏览习惯,这一点上真佩服淘宝UED的交互设计师们。

刚好我在2010淘宝首页改版的时候就偷偷模仿了这个效果。

查看demo 下载  Oslide.0.2.0.js 下载demo-Oslide.0.2.0

Oslide

继续阅读:淘宝首页广告轮换效果插件Oslide

颈部保健操

2 Comments

这张图片太可爱了,请各位同学每天认真的看3遍。

颈部保健操

继续阅读:颈部保健操

<<PREV NEXT>>
/10
/10
目录
阅读设置

书本模式 传统模式

开启 关闭

开启 关闭