面向对象的js编程

首先我没有使用前人的导出rss的方法(方法参见也来为自己的博客加个花，兼AJAX跨域的一点疑问)，因为我的随笔也不是篇篇都是精华，嘿嘿。所以我就手写了个table代码如下
<!-- TitleMenu Begin -->

<div style="height: 16px; border: 0px; position: absolute; top: 40px; left: 530px; width:500px;"

id="Tree_ShowTitleImg">

<table border="0" cellpadding="0" cellspacing="0" style="float: left;">

<tr>

<td style="height: 16px; line-height: 16px; width:20px;">

<img src="/images/cnblogs_com/treeyh/broadcast.gif" alt="图片" title="图片" /></td>

<td style="height: 17px; line-height: 16px; color:Red; width:50px;" valign="bottom">

推荐阅读</td>

</tr>

</table>

<div style="height: 16px; overflow: hidden; border: 0px; margin-left: 5px;" id="Tree_ShowTitle">

<div style="border: 0px; font-size: 12px; height: 100%;" id="Tree_ShowTitle1">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td style="height: 16px; line-height: 16px;">

<a href="http://www.cnblogs.com/treeyh/archive/2008/01/10/1034080.html" target="_blank">使用Repeater实现类似GridView编辑功能</a></td>

</tr>

<tr>

<td style="height: 16px; line-height: 16px;">

<a href="http://www.cnblogs.com/treeyh/archive/2007/12/28/1018409.html" target="_blank">关于ActiveX插件小项目总结</a></td>

</tr>

<tr>

<td style="height: 16px; line-height: 16px;">

<a href="http://www.cnblogs.com/treeyh/archive/2008/01/04/1026048.html" target="_blank">调用windows注册表获得参数</a></td>

</tr>

<tr>

<td style="height: 16px; line-height: 16px;">

<a href="http://www.cnblogs.com/treeyh/archive/2008/01/04/1026048.html" target="_blank">原来SQL也有try-catch</a></td>

</tr>

</table>

</div>

<div style="border: 0px;" id="Tree_ShowTitle2">

</div>

</div>

</div>

<!-- TitleMenu End -->

对于排版，我采用绝对坐标的方式，图片拷贝了杨正祎博客中的图标，见谅见谅啊，嘿嘿。总体结构是一个大的div包含两个内部的div，第一个div中装载我所显示的table，第二个会用js的innerHTML方法加载与第一个div相同的内容，然后循环显示内部的两个div。

下面先介绍我所用到的几个函数

//获得实例

function $(objectId)

//添加事件

function addEvent(oTarget,eventType,fnEvent)

//移除事件

function removeEvent(oTarget,eventType,fnEvent)

var _treeMenu;

//跳转函数,1、主容器,2、子容器1,3、子容器2,4、运行间隔(毫秒)

function TreeMenu(titleMainCase , titleCase1 , titleCase2 , spaceTime)

注意_treeMenu这个全局变量，这是在调用Init方法初始化的时候把函数体赋过去，之后用它来进行调用，而不能用this，这时候的this是window具体是为什么，我还没深入研究，在这个问题上卡了很长时间，差点就放弃了，后来无意间看到一片文章，嘿嘿。

下面介绍下几个方法吧，虽然注释都写在上面了：

1、Init方法是初始化_treeMenu变量，然后innerHTML入div2；

2、Start方法是整个函数体的启动方法，在运行间隔后执行_Run方法，并加载鼠标事件；

3、_Run方法，它首先取消鼠标事件，然后执行标题跳转，并且900毫秒后执行_Stop方法；

4、_Stop方法是一个衔接的过程，承上启下；

5、最后_TitleTurn方法就是具体的标题翻转的方法了。

最后调用只要三行代码就够了：

var ofunction = new TreeMenu('Tree_ShowTitle' , 'Tree_ShowTitle1' , 'Tree_ShowTitle2' , 3000);

ofunction.Init();

ofunction.Start();
因为要看效果，我设的是3秒跳转一次简单明了，不过推荐5秒，不要人家刚想把鼠标点上去就移走了，嘿嘿。

不过如果在FireFox下显示会有叠影问题，估计是CSS没调好，而且Top高度也与IE不同，不知何故，唉

附代码下载：TreeMenu.js

本文来自：http://www.cnblogs.com/treeyh/archive/2008/02/01/1061462.htmlhttp://www.cnblogs.com/treeyh/archive/2008/02/01/1061462.html