前言

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

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

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

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

目录

差异化兼容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的网页变灰

渐进式圆角组件

5 Comments

目前主流的浏览器除了msie内核的几乎都能支持CSS3的属性,而过去对于页面圆角的制作有这么几种方法:背景图,滑动门,通过js叠加很多小的div构成圆角,或者4个无语义的节点贴4个脚等等。

一方面在页面中增加了很多无语意得节点,不利于SEO等种种弊端,如果用js插入也增加了大量费时DOM操作。如果页面上有几十个圆角,所消耗的时间可想而知。如今有了CSS3这套方案,可以采用多背景图很轻松地解决这个问题,或者使用border-radius。

对于Mozilla内核的我们使用私有属性-moz-border-radius,对于Webkit内核的我们采用其私有属性-webkit-border-radius,对于Opera内核的我们采用border-radius,Msie我们就用传统方案解决它。

今天我们构建一个JsHook触发方式,并按HTML5,使用自定义属性Js数据源

对于JsHook的说明:Hook仅能出现在id和class中,命名规则是j_UppCamelCase

对于Js数据源的约定:使用HTML元素的自定义属性:data-xxxxx

上面这2条可以看看 前端JavaScript相关的小Tips

继续阅读:渐进式圆角组件

脚本动态加载

No Comments>>

往往在大型RIA运用当中,如果要用户等待全部的脚本加载以后再进行正常的浏览,这绝对是很差的用户体验,像YUI,Dojo这样庞大的类库他们怎么处理的呢,他么首先加载最基本的,然后再更具按需求加载相应的模块,在页面点开时候js文件最多能并行下载2个,如果采用脚本动态加载技术这样会极大了节约了页面打开时数据流量.

如果采用HttpRequest方法来动态加载当然OK,但是这样会阻塞页面中图片的下载,会出现什么情况呢?

页面在JS下载的几秒中一片空白,没有内容的显示,如果JS文件数据量很小,这个变化几乎可以不不见,那么如果很大就会严重的影响用户体验。

继续阅读:脚本动态加载

阅读设置

书本模式 传统模式

开启 关闭

开启 关闭