fan.log()

javascript基本类型和对象类型

2009-07-08T00:37:00.001+08:00

基本类型

<script type="text/javascript">
var a = 3.14, b = a;//a 的值赋值给b
a = 10;//a的值改变
alert(b);
</script>

对象类型 object

<script type="text/javascript">
var a = {
 name: 'Colin',
 age: 24,
 Height: '173cm'
};

window.option = a;
option.name = 'Jerry';
alert(a.name);
</script>

对象类型 Array

<script type="text/javascript">
var arr = [1, 2, 3];
var b = arr;
b[0] = 4;
alert(arr[0])
</script>

对象类型 DOM

<style type="text/css">.red{color:red}.blue{color:blue}</style>
<div id="demo1"><span class="red">Hello world!</span></div>
<script type="text/javascript">
var obj = document.getElementById('demo1').getElementsByTagName('span')[0];
var myInst = obj;
myInst.className = 'blue';

var objStr = document.getElementById('demo1').innerHTML;
var myStr = objStr;
myStr = myStr.replace(/blue/g, 'blue');
alert("myStr = " + myStr);
alert("obj.innerHTML = " + obj.innerHTML);
</script>

CSS技巧两则

2009-05-14T21:38:00.001+08:00

CSS实现圆角，mozilla和webkit有CSS3实现圆角的新特新


-mozilla-border-radius /*Mozilla圆角属性 */
-webkit-border-radius /*webkit圆角属性 */

圆角demo：

<div style="width:100px;height:100px;border:1px solid #666;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#CCC"></div>

border实现简单阴影：

圆角demo：

<div style="width:500px;border:2px solid #EEE;-moz-border-radius:3px;-webkit-border-radius:3px">
<div style="height:100px;border:1px solid #DDD;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF"></div>
</div>

这些小技巧其实都是平时积累的小经验，多留意细节处理，会发现有很多方法实现很强大的功能。

Google Chrome多进程的必要场景

2009-04-22T01:53:00.000+08:00

我是个极度偏向RIA应用的web终端用户，我常用的web程序如下Gmail, Google Reader, Google Docs, Google Languages tools, Google webpicasa, picnik, 1g1g.com, 猫扑爱听, 虾米，以上这些应用都常年霸占我的书签工具栏最佳位置。

试想一下，如果某次我正在Gmail聊天，用亦歌听歌，用Google Doc上传文档，浏览朋友的picasa，并用webQQ挂着我的QQ，正当我想在Gmail告诉朋友相册地址时，Firefox异常错误，所有眼前我正在做的事情瞬间中断，你会不会捶桌子？虽然在此重启Firefox, Firefox会重新自动打开上次访问过的页面，但我体验过这种异常关闭，很抓狂。有可能是你访问的站点的脚本很糟糕，也有可能是Firefox本地的插件异常造成关闭。

这时候，Google Chrome的多进程是不是显得格外优秀？

Javascript跨域传递JSON

2009-04-18T01:29:00.001+08:00

Javascript无法跨域访问，这是Javascript的安全机制，跨域访问的定义可以这么说，www.google.com域下的脚本不能访问www.amazon.com域，www.google.com当然也不能访问子域名site.google.com域。JS如果要跨域访问数据，AJAX的http请求跨域数据会报错。如果需要用JS请求跨域的数据，JSON是很好的选择。跨域获取JSON并不是异步请求，而是应用script标签的src属性获取到服务器生成的JSON格式化文本，例：

<script type="text/javascript">
function jsonCallback(resp) { //jsonCallback是下面script标签回调的,resp将返回的JSON作为参数传递
  var entris =  resp.feed.entry
}
</script>
<script type="text/javascript" src="http://fanlog.blogspot.com/feeds/posts/default/?max-results=10&start-index=1&alt=json-in-script&callback=jsonCallback"></script>

script标签src的地址，是blogger API返回的JSON格式化数据，数据格式如下：

jsonCallback({"feed":["content",{"$t":"第一个标题"}],["content",{"$t":"第二个标题"}], .....

JSON数据格式可以像访问JS对象一样去访问，例如jsonCallback.feed[0].content.$t返回的值就是"第一个标题"，"[]"符号表示数组对象，访问第二个"[]"即为jsonCallback.feed[1]。

jQuery有一个getJSON()的方法可以直接访问JSON数据。prototype貌似米有。

inline-block属性

2009-04-15T16:21:00.005+08:00

IE6和IE7可以通过触发haslayout模拟inline-block，而事实上，通常需要用到inline-block的元素都会用到width，而width本身就可以触发haslayout，很多文章在写到IE6、IE7中使用inline-block时，都写了zoom属性，事实上是不需要的。

延伸一个问题，很多时候在使用text-indent来隐藏文字时，一个inline元素并且使用了inline-block属性时，IE6下的麻烦就来了：

<div title="父容器"><span style="display:inline-block; width:120px; text-indent:-9999px; background:url(https://www.google.com/accounts/picasa20x20.png) no-repeat scroll 0 0">被隐藏的文字</span>测试文字测试文字</div>

如果以上代码中span的前面没有文字，整个div父容器就不见了。不见的原因还是text-indent，粗暴的解决方法：

<div title="父容器"> <span style="display:inline-block; width:120px; text-indent:-9999px; background:url(https://www.google.com/accounts/picasa20x20.png) no-repeat scroll 0 0">被隐藏的文字</span>
测试文字测试文字</div>

差异性同步工具cwRsync

2009-04-12T15:51:00.000+08:00

cwRsync是windows下的同步工具，比如在local的代码需要提交到测试服务器进行测试，如果一次两次的copy还好，但是代码涉及到的目录很多的话就需要频繁的切换本地以及服务器的目录，很烦躁的。cwRsync可以直接文件夹对文件夹同步，配置好同步的路径，执行一次.bat文件即可。cwRsync有client和server两个版本，如果

下载cwRsynchttp://www.itefix.no/i2/node/10650

分别下载server和client版本，如果需要从本地同步到服务器，服务器必须安装server版本，因为cwRsync需要通过SSH登录服务器并验证用户。

了解HTML5

2009-04-07T21:25:00.001+08:00

W3C已经接受并发布了HTML5的草稿，浏览器厂商已经等不及xhtml4.2的发布，技术的更新永远是跟这需求走的，任何技术标准还是离不开广泛的应用，如果不切实际的追求标准，只能吃力不讨好。

了解一下HTML5就明白，为什么这些大的厂商等不及xhtml4.2的发布。现在的web已经不是传统的内容呈现页面+超文本链接。丰富的交互体验需求以及风靡的AJAX应用对服务器的密集请求，迫使HTML5的促成。Google Gears要解决的问题，事实上也是HTML5要解决的问题。

Google Gears这个浏览器插件可以使web应用程序在本地离线运行，允许JavaScript访问、操作存储在本地的格式化数据，用户所有的本地离线操作和数据都将在下一次联网与服务器同步。显然Cloud app是离不开Google Gears。

HTML4.0或(X)HTML1.0+AJAX可以实现丰富的交互，AJAX带来前所未有的良好用户体验，但是HTML并不是标准的格式化数据标签，而客户端任何一次对数据的操作，都必须请求服务器，AJAX固然好，可是密集的数据请求所带来的性能问题，是Cloud App无法接受的。

HTML5的部分新特性：

新增了nav, aside, head, foot, article等更具有语义的标签
新增了canvas, video等多媒体标签的支持
对Javascript开放更多的API，Javascript更容易操作并且可以用sql语句访问存储在浏览器本地的格式化数据

可见HTML5希望带来更丰富的交互体验以及更高效的开发，目前HTML5和XHTML2仍然不是W3C官方推荐的语言标签，不过我个人认为，浏览器厂商的确有必要以官方的姿态站出来制定标准。

可持续访问的AJAX

2009-02-26T00:13:00.001+08:00

《ppk on Javascript》书中谈到Javascript的目的，Javascript其实是为web增加特别的一层可用性，我的理解Javascript的在web中的角色是增加web的易用性，让用户更好的体验web产品，开发者在设计产品时，就应该考虑到不同用户的复杂情况，例如禁用脚本的用户、盲人、手持设备用户等等。

创建可持续访问性的web，也可以如上理解，具体在开发中的细节如下：

a链接一定有href地址，页面分离事件注册器，决绝行内时间注册（例如<a href="#" onclick="func();">）
有选择性的使用Javascript和CSS隐藏页面内容¹
不用Javascript做页面跳转，否则用户使用浏览器的后腿按钮将无限制跳转，最终只能强迫用户推出页面，这样的体验真的很糟糕，我想至少我收够了这样的方式；
务必考虑脚本兼容主流的浏览器，招商银行的网银和之前淘宝的支付宝不支持Firefox就是例子，用户抱怨很囧

另外，记录一下以前开发中的小技巧：

当我们希望点击一个a链接，然后用一个DIV的popup容器来呈现内容而不刷新页面时，使用AJAX如果做到持续的可访问性呢？首先，来思考一下无脚本的情况下，这个a链接的地址一定是能够访问的，访问的页面应该是完整的页面（有head和foot），而不是HTML片段。然后，再思考一下有脚本情况下，我们给a链接注册一个事件func，事件func完成一个AJAX请求，把a链接的href地址通过异步获取到当前页面，并且创建一个DIV作为popup容器，那么这个popup容器内被请求的HTML不应该显示head和foot部分（HTML片段）。那么，现在的问题是，如果判断当a链接分别在有脚本、无脚本的的情况下，显示或者不显示页面的head、foot部分呢？如下：

当脚本可用时，我们在func里给a链接加上一个参数"popup"：

<a href="http://www.site.com/site.php">Click</a>//页面静态地址
<a href="http://www.site.com/site.php?popup=1">Click</a>//JS给a href添加“&popup=1”

那么现在当为AJAX请求页面时，a href带有一个popup=1的参数，当无脚本时，a href无popup=1的参数，这个参数有什么用呢？popup=1这个参数可以交给服务器脚本，服务器脚本判断当页面上有popup这个值时，就不编译head和foot的HTML，没有这个popup这个值，服务器脚本就编译head和foot的值。

以上这种方法,美味书签用到很多，有兴趣的可以登录体验一下美味书签的一些操作(删除、编辑)，操作方法就是禁用脚本，或者对美味书签的删除、编辑按钮用新窗口打开。

有选择性的选择JS或者CSS隐藏内容，分情况例如：JS驱动的下拉菜单，禁用脚本用户是无法浏览到被隐藏的菜单，那么菜单的隐藏内容应该用JS隐藏，当无脚本的情况下，JS隐藏菜单的功能自然也无法工作，那么禁用脚本的用户自然也可以浏览到本该隐藏的菜单列表

弄懂IE的haslayout（二）

2009-02-23T22:30:00.000+08:00

IE6中，如果list的子节点display为block属性，IE6会把HTML文档中的换行符呈现出来，以至于list之间出现空白的间隔，代码如下：

<style type="text/css">
* {margin:0;padding:0;}
li {list-style:none;}
li span {
  display: block;
  background-color:#f1f1f1;
  zoom:1; /*去掉zoom属性，查看IE6下span的haslayout值*/
}
</style>

<ul>
  <li><span>link items</span></li>
  <li><span>link items</span></li>
  <li><span>link items</span></li>
</ul>

获取鼠标位置

2009-02-22T23:54:00.003+08:00

获取鼠标位置，就是获取event对象的坐标属性，先看看如何获取event对象。在W3C的模型中，把参数传递的第一个参数当作当前的event对象，在MSIE的模型中，总是window.event。

function myfunc(e) {
  var e = e || window.event;//如果e不存在，则获取window.event
}

event对象的坐标属性pageX, pageY分别是当前鼠标相对body的X, Y的坐标值，但是在IE中没有pageX和pageY，不过可以通过clientX, clientY加上scrollTop, scrollLeft的值来确定当前鼠标的位置。clientX, clientY是当前鼠标相对window的坐标值。代码：

function mouseCoords(e){
 if(e.pageX || e.pageY){//标准浏览器返回当前鼠标坐标值
  return {x:e.pageX, y:e.pageY};
 }
 else if(e.clientX || e.clientY) {//仅IE返回回当前鼠标坐标值
  return {
   x:(e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft),
   y:(e.clientY + document.documentElement.scrollTop  + document.body.scrollTop)
  }
 }
}
function mouseMove(e){
 e = e || window.event;
 var mousePos = mouseCoords(e);//这里mousePos.x, mousePos.y分别为鼠标的X, Y坐标值
}

以上代码中发现一个兼容性问题，如果文档声明为XHTML，document.body.scrollTop的值始终为0，所以在XHTML文档声明的时候，只能用document.documentElement.scrollTop。

爸妈学电脑

2009-02-19T21:10:00.002+08:00

我真的没想到，难倒爸妈学习电脑，不是windows操作系统的各种按钮以及各种术语，也不是windows的难以理解的文件管理系统。真正让他们头疼的是密密麻麻的键盘和难以操作的双键鼠标。

爸妈两个人几乎都无法适应鼠标的两个键操作，经常误击鼠标的右键。教他们的同时，我不得不想到苹果电脑的单键鼠标。80年代Apple公司的GUI操作系统及Windows的视窗普及之后，鼠标也随着普及，80年代至今，鼠标经历了滑动机械鼠标、光电鼠标等等。当然鼠标的形状及手感也越来越舒适，可是鼠标上的按键越来越复杂。这也怪不了我的爸妈用起来鼠标来那么吃力，苹果电脑的单键鼠标这么多年，从OS 8.6已经支持鼠标右键菜单，可是苹果一直随箱附送单键鼠标，这里有一篇文章很有意思，可见苹果的设计师很多年前就碰到过我爸妈这样的用户。

弄懂IE的haslayout（一）

2009-02-16T23:08:00.001+08:00

haslayout到底是什么？

haslayout是IE的私有概念，HTML部分元素默认拥有haslayout，而通过部分的CSS，可以给haslayout不为true的HTML元素触发为true。也就是说，如果某个HTML元素拥有haslayout属性，那么这个元素的haslayout的值一定只有true，否则，这个元素就没有haslayout，haslayout一旦被触发，就不可以逆转，haslayout为只读属性。

查看haslayout的值

通过IE Developer Toolbar可以查看IE下HTML元素是否拥有haslayout，在IE Developer Toolbar下，拥有haslayout的元素，通常显示为“haslayout = -1”。

那些HTML元素默认拥有haslayout？

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <select>, <textarea>, <button>
<iframe>, <embed>, <object>, <applet>
<marquee>

在IE下，哪些CSS属性可以触发haslayout为true?

IE6:
position: absolute, float: left|right, display: inline-block, width: 任意值, height: 任意值, zoom: 任意值
IE7:
overflow: hidden|scroll|auto, position: fixed, min-width: 任意值, max-width: 除 none 之外的任意值, min-height: 任意值, max-height: 除 none 之外的任意值

那么，了解haslayout有何意义呢？haslayout可以解决IE很多奇怪的bug和渲染bug，通常通过触发haslayout为true来解决。接下来，就了解下因为haslayout的临床表现：

负边框问题，下载这个demo然后去掉IE6注释，对比标准浏览器和IE6下不同的表现，并且用IE develop toolbar查看不同表现的HTML元素的haslayout。
滤镜，IE的私有滤镜只有在元素被触发haslayout后，滤镜才会被执行。

未完待续。。。

IE6实现positon:fixed

2009-01-11T00:31:00.003+08:00

HTML代码：

<div id="userPanel">
 <h2>user panel</h2>
 <ul>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
 </ul>
</div>

<div id="wrap">
 <div id="content">
  <div class="text">
   <p> text </p>
   <p> text </p>
   <p> text </p>
   <p> text </p>
  </div>
 </div>
</div>

CSS代码：

#userPanel {
 width: 160px;
 padding: 10px;
 background-color: #EEE;
 position: fixed;
 top: 50px;
 left: 25px;
}


#top {
 padding: 5px 15px;
 background-color: #ffffbb;
 position: fixed;
 right: 0;
 bottom: 0;
}

#content {
 width: 550px;
 margin-left: 220px;
 background-color: #eee;
}

.text {
 height: 1000px;
}

/* IE 6 only
------------------------------------- */
* html, * html body {
 /overflow: auto;
 width: 100%;*/
 height: 100%;
}

* html #wrap {
 height: 100%;
 width: 100%;
 overflow: auto;
 overflow-y: scroll;
 position: relative;
}

* html #userPanel {
 position: absolute;
}

*html #top {
 position: absolute;
 right: 16px;
}

demo预览

解决IE6渲染BUG

2009-01-09T00:59:00.004+08:00

js操作DOM，有时候在IE6下简直就是噩梦，不渲染的解决方法通常都是zoom强制IE渲染来解决：

javascript代码：

document.body.style.zoom = 1.1;
document.body.style.zoom = '';

以上代码事实上是迫使body在IE下重新执行CSS渲染，简单点理解——IE6碰到zoom值发生变化，就一定会重新渲染。事实上我经常用zoom来解决IE6下CSS渲染问题，如果容器出现怪异，加上zoom: 100%，IE6就乖乖的驯服。做个demo下载(下载的文件请加上后缀.html)

HTML、CSS设计应该注意的细节

2009-01-08T23:49:00.000+08:00

细节容易忽视，但是却很容易影响视觉美感，或者影响用户的体验，在使用HTML、CSS设计页面时，下面这些细节一定要注意到：

body中定义中文字体，一定使用中文用户最普遍的字体，宋体一定不小于12像素，否则都会让用户阅读时视觉疲劳，当然也影响美观。关于字体size，建议使用em作为单位。
如果列表条目链接有截断完整句子，那么在链接一定记得在title内留下完整的信息。
H1标签使用千万小心，公用的head区域不使用H1标签，否则所有使用了公用head的页面H1标题一样，这样不利用SEO。
编码，这是老问题了，有时候切换不同的IDE编辑文件，更要注意。
a链接请与普通文本区分开来，如果a:link状态是无下划线状态，那么请把a:hover状态加上下划线，链接就是链接。

暂时想到这么多，以后慢慢补充。doubanclaimad330bed027d67fc

[转]scrollLeft,scrollWidth,clientWidth等详解

2009-01-08T17:05:00.000+08:00

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

用隐藏的iframe提交表单

2009-01-08T16:25:00.000+08:00

AJAX无法上传文件是很头疼的事情，不过我们可以用隐藏在页面上的iframe提交，这里讨论的是用iframe提交表单之后，如果获取返回数据。

HTML代码片断：

form method="post" action="upload_file" target="hiddenFrame">

form的target指向iframe，通过iframe提交表单

Javascript代码：

function uploadFile() {
  $('hiddenFrame').onreadystatechange = $('hiddenFrame').onload = function() {
      if(this.readyState && this.readyState!= 'complete') {return;} //readyState判断iframe内容是否改变

      //获取iframe dom
      var frameBody = top.frames[0];
      if(!frameBody) return;
      frameBody = frameBody.document;
      if(!frameBody) return;        
      frameBody = frameBody.getElementsByTagName('body');
      if(!frameBody) return;
      frameBody = frameBody[0];
      if (!frameBody) return;
  }
}

以上代码是通过DOM获取iframe的body下返回的数据，数据可以是文本，也可以是JSON格式，如果是JSON格式，就需要evel()来解释。这种方法是在页面上写静态的iframe，复杂一点可以在页面上用JS创建iframe，不过考虑到可用性，建议还是在页面上写静态的iframe。

封装鼠标跟随tips

2009-01-08T13:32:00.000+08:00

刚学习prototype.js的时候写的一个鼠标跟随提示的代码，后来在项目中发现一个很严重的问题，暂时没有修正。代码基于prototype.js v1.6。

代码打包下载

Javascript代码:

function handleTips(idElement) {
    this.handleBtn = (typeof idElement == 'string')? $(idElement) : idElement;
    this.popuptips = (typeof idElement == 'string')? $(idElement + "-tips") : idElement.id + "tips";
   
    this.handleBtn.onmouseover = this.showTips.bind(this);
    this.handleBtn.onmouseout = this.hiddenTips.bind(this);
    this.handleBtn.onmousemove = this.cursorPosition.bind(this);
}

handleTips.prototype.showTips = function() {
 //debugger;
 Element.show(this.popuptips);
 this.cursorPosition(arguments[0]);
}

handleTips.prototype.hiddenTips = function() {
        Element.hide(this.popuptips);
}

handleTips.prototype.cursorPosition = function(){
 
    var event = arguments[0] || window.event;
    this.arrPageSize = getPageSize();
    this.pageWidth = this.arrPageSize.PageWidth;
    this.pageHeight = this.arrPageSize.PageHeight;

   
    this.leftSpace = Event.pointerX(event) + 20;
    this.topSpace = Event.pointerY(event) + 20;

    this.rightSpace = this.pageWidth - this.leftSpace;
    this.bottomSpace = this.pageHeight - this.topSpace;
   
    this.tipsWidth = this.popuptips.getWidth();
    this.tipsHeight = this.popuptips.getHeight();

   
    if (this.tipsWidth < this.rightSpace && this.tipsHeight < this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) + 20 + "px",
            top: Event.pointerY(event) + 20 + "px"
        });
    } else if(this.tipsWidth > this.rightSpace && this.tipsHeight < this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) - this.tipsWidth - 20 + "px",
            top: Event.pointerY(event) + 20 + "px"
        });
    } else if(this.tipsWidth < this.rightSpace && this.tipsHeight > this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) + 20 + "px",
            top: Event.pointerY(event) - this.tipsHeight - 20 + "px"
        });
    } else if(this.tipsWidth > this.rightSpace && this.tipsHeight > this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) - this.tipsWidth - 20 + "px",
            top: Event.pointerY(event) - this.tipsHeight - 20 + "px"
        });
    }
}


function getPageSize() {
    var scrW, scrH;
    if(window.innerHeight && window.scrollMaxY) {
        // Mozilla
        scrW = window.innerWidth + window.scrollMaxX;
        scrH = window.innerHeight + window.scrollMaxY;
    } else if(document.body.scrollHeight > document.body.offsetHeight){
        // all but IE Mac
        scrW = document.body.scrollWidth;
        scrH = document.body.scrollHeight;
    } else if(document.body) {
        // IE Mac
        scrW = document.body.offsetWidth;
        scrH = document.body.offsetHeight;
    }
   
    var winW, winH;
    if(window.innerHeight) {
        // all except IE
        winW = window.innerWidth;
        winH = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        // IE 6 Strict Mode
        winW = document.documentElement.clientWidth;
        winH = document.documentElement.clientHeight;
    } else if (document.body) { // other
        winW = document.body.clientWidth;
        winH = document.body.clientHeight;
    }
   
    // for small pages with total size less then the viewport
    var pageW = (scrW < winW) ? winW : scrW;
    var pageH = (scrH < winH) ? winH : scrH;
   
    return {PageWidth:pageW, PageHeight:pageH, WinWidth:winW, WinHeight:winH};
}

Event.observe(window, 'load', function() {new handleTips('note')});

CSS代码:

.tips {
    position: absolute;
    z-index: 9999;
    padding: 5px;
    background-color: #FFFFFF;
    border: 1px solid #FF6600;
}

#note {
 margin: 100px 0 0 300px;
}

#note-tips {
 width: 120px;
}