手动实现滚动标题效果-优快云博客

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

< 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，第一个div中装载我所显示的table，第二个会用js的innerHTML方法加载与第一个div相同的内容，然后循环显示内部的两个div。
下面先介绍我所用到的几个函数

// 获得实例

function $(objectId)

{

return document.getElementById(objectId);

}

// 添加事件

function addEvent(oTarget,eventType,fnEvent)

{

if(oTarget.addEventListener)

oTarget.addEventListener(eventType,fnEvent,false);

else if (oTarget.attachEvent)

oTarget.attachEvent('on' + eventType,fnEvent);

else

oTarget['on' + eventType] = fnEvent;

}

// 移除事件

function removeEvent(oTarget,eventType,fnEvent)

{

if(oTarget.removeEventListener)

oTarget.removeEventListener(eventType,fnEvent,false);

else if (oTarget.detachEvent)

oTarget.detachEvent('on' + eventType,fnEvent);

else

oTarget['on' + eventType] = null;

}

第一个函数应该不用解释了，后面两个是添加和删除事件用的，主要用于鼠标移动上去使滚动暂时的效果，写法是我参照《javascript高级程序设计》p252-253页的实例，addEventListener和removeEventListener方法是firefox中使用，IE是后面两个。
现在开始讲实现函数了，按照OO的原则，我希望能用一个函数就能实现这样的功能，这个函数要传入这样几个参数，第一个为主容器ID，第二、三个为两个子容器ID，第四个参数为间隔的时间(单位是毫秒)，然后调用相关的方法就OK了，下面是函数体。

var _treeMenu;

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

function TreeMenu(titleMainCase , titleCase1 , titleCase2 , spaceTime)

{

this._otitle = $(titleMainCase);

this._otitle1 = $(titleCase1);

this._otitle2 = $(titleCase2);

this._spaceTime = spaceTime;

this._runTitle = null;

this._startTitle = null;

this._stopTitle = null;

}

TreeMenu.prototype =

{

Init : function()

{

_treeMenu = this;

_treeMenu._otitle2.innerHTML = _treeMenu._otitle1.innerHTML;

Start : function()

{ //定制_treeMenu._spaceTime毫秒启动_Run方法

addEvent(_treeMenu._otitle,'mouseover',_treeMenu._Release);

addEvent(_treeMenu._otitle,'mouseout',_treeMenu.Start);

_treeMenu._startTitle = setTimeout(_treeMenu._Run , _treeMenu._spaceTime);

_Run : function()

{ //运行标题跳转,运行间隔100毫秒,取消_treeMenu._otitle事件,900毫秒后执行_Stop方法

removeEvent(_treeMenu._otitle,'mouseover',_treeMenu._Release);

removeEvent(_treeMenu._otitle,'mouseout',_treeMenu.Start);

_treeMenu._runTitle = setInterval(_treeMenu._TitleTurn , 100);

_treeMenu._stopTitle = setTimeout(_treeMenu._Stop , 900);

_Stop : function()

{ //停止标题跳转,加载_treeMenu._otitle事件,并执行Start方法

clearInterval(_treeMenu._runTitle);

_treeMenu.Start();

_Release : function()

{ //清除_treeMenu._startTitle中方法

clearTimeout(_treeMenu._startTitle);

_TitleTurn : function()

{ //标题跳转

if(_treeMenu._otitle2.offsetTop - _treeMenu._otitle.scrollTop<=0)

_treeMenu._otitle.scrollTop -= (_treeMenu._otitle1.offsetHeight-2);

else

_treeMenu._otitle.scrollTop = _treeMenu._otitle.scrollTop+2;

}

        注意_treeMenu这个全局变量，这是在调用Init方法初始化的时候把函数体赋过去，之后用它来进行调用，而不能用this，这时候的this是window具体是为什么，我还没深入研究，在这个问题上卡了很长时间，差点就放弃了，后来无意间看到一片文章，嘿嘿。
        下面介绍下几个方法吧，虽然注释都写在上面了：
        1、Init方法是初始化_treeMenu变量，然后innerHTML入div2；
        2、Start方法是整个函数体的启动方法，在运行间隔后执行_Run方法，并加载鼠标事件；
        3、_Run方法，它首先取消鼠标事件，然后执行标题跳转，并且900毫秒后执行_Stop方法；
        4、_Stop方法是一个衔接的过程，承上启下；
        5、最后_TitleTurn方法就是具体的标题翻转的方法了。
        最后调用只要三行代码就够了：