Follow me on GitHub

JavaScript

输入Email查看Gravatar头像的小工具

10月 27th

由Kainy分类在JavaScript

当你到任何一个支持Gravatar的网站留言时，这个网站都就会根据你留言时提供的Email地址为你显示出匹配的头像。当然，这个头像，是需要你事先到Gravatar的网站注册并上传的，否则，在这个网站上，就只会显示成一个默认的头像（如右图）。具体介绍见这篇文章。

下面介绍下本文的主角：这是一个可以查看email所对应Gravatar头像的小工具，用浏览器打开后，输入需要查询的email，点击旁边的按钮提交后即可 More >

Gravatar, JavaScript, 工具

jQuery实现背景图填满屏幕的代码

10月 24th

由Kainy分类在JavaScript

拾贝电台是一个收集了众多优秀电台资源的广播频道聚合器，其功能模块较少，无非播放控制和播放列表等几个窗口。为了不至于留下太多的空白区域影响整体美观，设置了可拉伸的背景图片。这里把实现该效果的代码贴出:

用jQuery实现背景拉伸，自适应窗口的调整而改变大小。该段代码应该放在网页内容之前，最好是紧跟在<body>之后，这样可以避免页面加载时出现太突兀的情景。

JavaScript计算客户端浏览器窗口尺寸比较简单。第一个模块的代码做一些初步的计算，判断图像比例，浏览器宽度。

再使用jQuery来操作相应节点的CSS规则改变图片显示，以保持图像的的比例不变适应浏览器窗口的调整。 More >

jQuery, 代码

jQuery插件的创建方法

10月 18th

由Kainy分类在JavaScript

一周前看到小谢发布自己的第一个jQuery插件-Xslider，对谢同学的崇敬之情顿时油然而生。于是这几天看到相关内容都留意一下，琢磨着啥时候也整一个自己的插件。要下定决心潜心研究jQuery的内部工作机制并创建一个作品，本身就是个不小的困难，而面对貌似不可能完成的困难，总是容易让我产生不愿向前一步的惰性，为了克服自身问题，还是按照习惯的学习方法，逆向工程学习法——张鑫旭大哥介绍了一个不错的文字信息提示插件——Colortip，就从对这个插件的研究入手结合官方教程，来认识jQuery插件的创建方法。

当然，这样的学习方法虽然容易上手能在较短时间里产出，却以牺牲规范性为代价，有很多不严谨的地方也在所难免。而在此过程中我也会将更多的精力放在插件的结构而不是功能的实现细节和最终效果上。 More >

jQuery, 插件, 方法

MooTools 1.3中的屏幕触摸事件

10月 17th

由Kainy分类在JavaScript

MooTools在其最新的1.3版本中加入了一个很给力的功能——检测屏幕触摸事件：touchstart， touchmove， touchend，touchcancel， gesturestart， gesturechange，gestureend和 orientationchange，使得这一Javascript框架更加完善。这篇文章就演示如何按照传统MooTools事件处理的语法，通过使用MooTools新特性来完成对移动事件的监听及响应。让移动设备用户在你的网页上完成原本只能在手机应用上进行的操作。

先看演示：必须用手机浏览器才有效果哦~.

JavaScript, MooTools, 框架

JavaScript中的BOM和DOM

10月 10th

由Kainy分类在JavaScript

BOM（JavaScript Object Modle）——浏览器对象模型是浏览器开发厂商为防止目前以及日后可能加入的大量可被控制的页面元素（HTML标签）给开发者造成的混乱，而为浏览器定义的浏览器模型，BOM结构如图示：

BOM, DOM, JavaScript, 标准

来自JS1K的超炫特效演示

9月 5th

由Kainy分类在JavaScript

这些演示在IE下无法正常工作，你可以用Chrome查看，很炫。不过更炫的是其源码，非常的简洁，不超过1K。如果你要知道更多，这里推荐个网站：JS1K Demo，这个站上主要收集一些Javascript不大于1K的程序。

<br />

用方向键控制运动 More >

JS, 演示, 特效

移动设备浏览当前页