CSS

美丽又悲剧的text-shadow

text-shadow,CSS3的好东西之一,给文字加上阴影,这让9x年代喜欢在Word里到处加艺术字的本人仿佛又找回了童年,那个凭着一台电脑在一群小屁孩中间如鱼得水的童年。 她的美丽 text-shadow如果用得好,确实可以塑造出相当不错的效果,下图是著名博客考据癖上的默认文字效果: 使用较淡的色彩(#e9e9e9)以及恰到好处的阴影(#fbfbfb 0 1px 0)制造出一种雕刻一般的感觉,增加了字体的锐度,增添了视觉的享受。 她的悲剧 只是很可惜,如果你是一个喜欢把正在看的段落涂黑的人,那么你就悲剧了,请看: 这已经不能用“糟糕”来形容了,我相信这样的字看上几百行,我一定能享受到久违的晕车的感觉,并将一整天吃下去的东西都还给大地母亲。 可以看看你现在使用的浏览器是不是还有这样的问题: 缘由 其实这一切不是text-shadow这属性的错,

JavaScript

jQuery的.css函数的一个BUG

其实关于jQuery的css函数的BUG在很久以前的一篇博文中就已经有所提到,不过那个已经在1.4.3版本中被修复了,只可惜又引入了一个新的BUG,并且直到jQuery1.4.4都没有修复,昨天看了玉伯的从 isPlainObject 到“完美”代码的实现一文,仔细从各方面考虑了一下,感觉这确实是一个BUG,因此在本篇再提及一下。 这个BUG的解释相当简单,就是一句话: 在IE中,当一个元素已经拥有filter样式时,使用$('#bug').css('opacity', value)会使原有的filter样式失效 问题的重现 重现这个问题,需要以下的HTML片断: <div class=

JavaScript

Javascript函数重载解决方案

方法重载是让类以统一的方式处理不同类型数据的一种手段。Java的方法重载,就是在类中可以创建多个方法,它们具有相同的名字,但具有不同的参数和不同的定义。调用方法时通过传递给它们的不同个数和类型的参数来决定具体使用哪个方法, 这就是多态性。 Javascript作为弱类型的语言,不能像JAVA、C#等静态语言一样,在语法层面上支持函数的重载,这体现在两个方面: 参数数量相同,类型不同 – Javascript的参数声明中根本没有类型 参数数量不同 – 后定义的函数会覆盖之前定义的 因此以下的代码 function fn(a) { alert(a); } function fn(a, b) { alert(a + b); } alert(fn(

CSS

用CSS3制作鼠标悬浮渐变着色效果

CSS3虽然还没有被广大浏览器所兼容,甚至A级浏览器也只是通过私有属性给予有限的支持。但是在渐进增强的理念下,有选择性地使用CSS3可以得到不错的效果,前提是保证在不支持CSS3的浏览下也可以获得最基本的样式。 本文会使用CSS3 Transition来制作特效,不使用任何的Javascript,最终效果大致如下: 一张黑白的图片,当鼠标悬浮在图片上时,慢慢变成彩色;鼠标移出时,逐渐恢复黑白。 东西简单,学习和记录是主要目的。这个功能可以用作一切使用背景图片的功能,诸如按钮、链接等都可以起到比较好的效果。 准备材料 为了完成着色的功能,首先需要一张黑白的图片,和一张彩色的图片,并且保证这两张图片可以完全重叠,这个很容易做: 得到一张彩色的图片,使用Photoshop打开。 选择菜单中的Image – Adjustment – Desaturate,也可以通过快捷键SHIFT+CTRL+U完成。

JavaScript

细说浏览器特性检测(2)-通用事件检测

在上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的,本文将以事件为中心,介绍一个较为完整、通用的事件检测方案。 事件检测,即检测某一事件在不同的浏览器中是否存在(可用),这在编写Javascript的过程中也非常重要,如mouseenter/mouseleave事件虽然实用,但并不是所有浏览器都提供了标准的支持,因此需要自己手动模拟,即: function addEvent(element, name, handler) { if (name == 'mouseenter' && !hasEvent(name, element)) { // 通过其他手段模拟mouseenter事件 } // 正常的事件注册 } 本文就重点讲述以上代码中hasEvent的具体实现。 基本方案 关于事件的最基本检测方式,则需要从事件的注册方法开始说。

JavaScript

细说浏览器特性检测(1)-jQuery1.4添加部分

浏览器特性检测即通过探测对象是否拥有某个属性或者函数,或者通过其他的编码探测方式,来决定其是否支持某一功能、特性。其最经典的运用莫过于通用的addEvent函数: function addEvent(element, type, handler) { if (element.attachEvent) { //IE8及以下浏览器 element.attachEvent('on' + type, handler); } else { //W3C标准浏览器 element.addEventListener(type, handler, false); } } 函数可以通过检测attachEvent函数是否存在,以决定使用attachEvent或者addEventListener,这也是最简单的一种特性检测,因而通常在需要时才进行实时的检测。另一种特性检测由于检测的过程较为麻烦,因此会预先完成检测,将检测的结果(

JavaScript

2010校招笔试其中2个理论题解释

公司2010年的第一轮校招笔试过程应该结束了,第一次接触到大公司的校招笔试,看到试卷的时候第一反应是“这题太变态了”。 去掉主观题和一些答案明确的题,有几题真的很好玩,虽然自己一直都会,但短时间内作答的话也很容易忘记一些细节,抽了几题做个记录。 判断一个变量是字符串,写出函数实现 大部分在校生能够勉强回答出这题的一部分,这次整理出来的答案有2个版本: function isString(obj) { return typeof obj == 'string'; } function isString(obj) { return obj instanceof String; } 将这两个版本整合起来,其实就是一个较为完美的答案,原理不再细说,字符串字面值和new String('abc')

JavaScript

二维数组转JSON格式字符串的思考

上周有一个同事求一函数,作用是将一个二维数组转换成JSON格式的字符串,其数据结构固定为数组-数组-整数,即要求的函数输入与输出如下: var array = [[10, 100, 1000], [1000, 100, 10]]; var s = encode(array); assert(s === '[[10,100,1000],[1000,100,10]]'); 函数的实现本身不难,但结果经过1小时的思考,函数有了好几个形态。 基本模式 首先是一个基本的将数组转成字符串的函数,由于数组中只有可能出现Array和Number两种类型,因此不需要额外处理Date、

杂项

Javascript类库的顶层对象名用户体验分析

针对jQuery、Ext、KISSY三者类库的对比及分析已经很多了,但多数是从功能和设计的角度切入,因此本篇文章决定换一个特殊的角度,从各类库的顶层对象名的键盘输入的体验上来对这三个类库进行比较。 由于顶级对象是使用类库几乎所有功能的入口,在编码中会频繁地输入这几个字符,因此在设计类库时,顶级对象名输入的简便性也是相当重要的。 在此将从对象名称的长度、输入对象名称的按键顺序这两个方面对三个类库进行重点比较,同时力求照顾到一些特别的点,从而得出一个较为全面的评测结果。 名称长度 jQuery共有6个字符组成,从长度上而言是三个类库中最长的一个,同时包含了一个大写字母Q,在输入过程中需要加入一次SHIFT键,因此长度值给定为7。 Ext共有3个字符组成,在长度上是最有优势的,由于首字母为大写字母E,输入过程中需要有一次SHIFT,因此长度值给定为4。 KISSY由5个字符组成,均为大写字母,长度上而言接近jQuery,同时需要一次SHIFT键的长按,因此给定长度值6。 在名称长度的对比上,最受欢迎的jQuery以微弱的劣势惜败,但jQuery使用了其他的方式在这方面给予了改进,