Home > All Categories >

Application

CSS z-index 属性的使用方法和层级树的概念

Nov 27th, 2011 32 Comments

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.

Read More...

通过 IP 区分不同国家的用户

Nov 3rd, 2011 36 Comments

为什么要在网站上通过 IP 区分来自不同国家用户? 这是为了让不同的国度和习惯的访客看到不一样的信息, 避免误导用户产生多余的交互行为或者因为页面的不合理而感到不爽.

通过 IP 判断用户所在地区, 区分显示广告

上图是最近我在顶部放置的广告 banner. 上方红色的是某网站圣诞节促销活动的 Affiliate 广告, 中国大陆之外地区的访客可以看到; 下方蓝色的是最新发布的与我同行 Apply App 应用广告, 只有中国大陆地区的访客可以看到.

Read More...

stopPropagation, preventDefault 和 return false 的区别

Oct 23rd, 2011 9 Comments

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), preventDefault()return false. 它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解.

Read More...

HTML5 画布 - 线条, 矩形, 圆形和文字

Jul 29th, 2011 21 Comments

上节已经介绍了如何取得画布及其上下文对象, 我们将开始使用 HTML5 Canvas 的绘图 API 来进行图形绘制, 本文会提及线条, 矩形, 圆形文本这几个基本图形. 本节主要介绍相关的图形绘制方法, 不会有难以理解的内容, 在需要注意的地方会着墨较多.

Read More...

HTML5 画布 - 参考资料, 画布元素和上下文

Jul 28th, 2011 7 Comments

最近在看一本关于 HTML5 Canvas 的书, 叫《Foundation HTML5 Canvas: For Games and Entertainment》, 书名比较长, 作者说得也比较累赘, 但是章节和内容都很清晰. 后面我会写一系列文章, 关于 HTML5 画布, 与此书章节同步, 可能插放一些别的内容.

Read More...

ActionScript 3 调度个性化事件

Dec 15th, 2010 9 Comments

第三章涵盖了基本事件的使用, 但是有一个话题没有被覆盖到 (出现在后面的章节中), 那就是使用 dispatchEvent() 方法发送一个特殊的, 设置自定义的事件. 这个方法被包含在 EventDispatcher 类之中.

Read More...

ActionScript 的 get 和 set 关键字

Dec 14th, 2010 12 Comments

ActionScript 提供 getter 和 setter 以存取类的属性. 在 OOP 编程的角度, 是出于类的封装性考虑, 类的继承 (protected) 和私有化 (private) 的属性不能直接暴露在外, 外部只能通过存取方法访问和修改.

Read More...

Notepad++ 对 AS 文件语法高亮

Dec 14th, 2010 13 Comments

Notepad++ 有 ActionScript 的语法高亮功能, 但它似乎不能被程序探查到. 打开的每个 AS 文件, 都要自行套用语法高亮, 特别麻烦. 当你打开一批文件, 那就需要逐个文件进行设定语言为 Flash actionscript.

Read More...

ActionScript 开发环境搭建

Oct 26th, 2010 25 Comments

虽然我一直不喜欢 Flash, 但作为前端, 我还是忍不住要玩一下传说中的 AS3. 今天在师弟和网友的帮助下, 终于将开发环境搭建了起来, 写出那让人怀念的 Hello World.

记录一下搭建步骤, 没啥技术含量, 纯学习笔记.

Read More...

960 网格系统即将过时

Oct 13th, 2010 35 Comments

960px 网格系统 (960.gs), 也称 960 栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 当显示屏和分辨率变得更大, 我发现 960 网格系统已经不能完全满足我的需求. 20px 的槽让内容区域实际只有 940px, 对现代的 Web 设计来说太窄小了. 在设计 Themify 主题的时候, 我发现一种新的网格布局, 相当适合用来设计当今的 Web 布局.

Read More...

随机排序广告

Aug 5th, 2010 25 Comments

博客流行在侧边栏放置 4 到 6 个 125x125 的广告, 但一般的摆放顺序存在问题. 如果广告位置被固定, 各个位置的天然关注度肯定是不一样的.

投放广告的人都很关注他的广告会放在哪个位置, 因为这可能影响点击次数, 甚至是否在第一屏显示. 就这个问题, 其实很容易解决, 只要随机显示广告即可.

代码如何实现? 在这我推荐两种随机显示广告的处理办法.

Read More...

谷歌音乐搜索栏的提示功能

Jul 4th, 2010 30 Comments

我很喜欢在 google.cn/music 上找 mp3, 因为谷歌音乐在版权方面, 用户体验和搜索功能都做得很好. 但是它的搜索栏提示功能一直存在一个小问题, bug 存在半年以上了吧...

问题描述

在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:

谷歌音乐搜索栏的 bug

Read More...

JavaScript 的 parseInt 取整

May 21st, 2010 11 Comments

JavaScript 是弱类型语言, 为了保证数值的有效性, 在处理数值的时候, 我们可以对数值字符串进行强行转换. 如 parseInt 取整和 parseFloat 取浮点数.

Java 也有 Integer.parseInt() 方法, 但是 JavaScript 的 parseInt 处理方式与 Java 等强整型语言不太一样, 所以经常有人因为对这个方法的使用不当而获得异常返回.

Read More...

关于 JavaScript 的 with 语句

May 17th, 2010 19 Comments

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.

用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如:

Read More...

JavaScript 放大镜 - 放大倍率和视窗尺寸

May 17th, 2010 20 Comments

JavaScript 放大镜来说, 计算倍率必不可少.
一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系.
倍率 = 原图/缩略图 = 视窗/镜片

javaScript,magnifier,multiple,viewport,glass,thumb

倍率一般大于等于 1, 因为原图一般都不会小于缩略图. 一旦倍率小于 1, 则将倍率设为 1.
因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率.

Read More...