Follow me on GitHub

JavaScript发表的日志

JavaScript 框架

由于不同 Web 浏览器所支持DOM标准版本不尽相同,与 HTML 和 CSS一样,不同的浏览器有不同的 JavaScript 实现方式。这使得早期 JavaScript 代码实现跨浏览器兼容成为一场噩梦。

就拿网站右下角常见的浮动提示框举例:

  1. 首先,必须通过判断getElementById() 方法存在与否来决定是用document.getElementById(“floater”).style还是document.floater方法进行浮动框定位;
  2. 要想把浮动内容固定在右下角,脚本需要知道可用页面的宽度和高度,这时又得考虑不同浏览器上访问这些对象的方法也存在window.innerHeight和document.body.clientHeight的差异;
  3. 针对上下或左右滚动页面时浮动内容也需要随着页面移动,又需要考虑是用window.pageXOffset方法还是document.body.scrollLeft方法。。。

而使用JavaScript 框架就清净多了,比如jQuery就有专门的Floatbox库扩展,一句$.floatbox({content: “xxxx” );就能搞定,要是心情好还可以考虑是否加入渐变效果啥的,jQuery库在众多流行的 Web 浏览器版本上进行了可靠性测试,我们可以放心地使用这些框架,产生的JavaScript代码将会在不同浏览器和平台上以类似的方式工作。 More >

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

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

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

MooTools 1.3中的屏幕触摸事件

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

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

前两个是点击屏幕产生的,后面一列是滑动产生的,电阻屏,只能记录到这些啦。。。 More >

JavaScript中的BOM和DOM

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

More >

移动设备浏览当前页