仿Discuz 公告特效！

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 打造兼容(IE,FF,Opera,Safari,Chrome)多浏览器的JS程序 </ title >
< style  type ="text/css" >
.cls_container { border : 1px solid #ccc ; width : 680px ; font-size : 12px ; height : 24px ; overflow : hidden ; }
.cls_container ul { list-style-type : none ; margin : 0 ; padding : 0 ; margin-left : 32px ; }
.cls_container ul li { height : 24px ; line-height : 24px ; width : 320px ; float : left ; display : inline ; }
</ style >
</ head >
< body >
< div  id ="myscroll"  class ="cls_container" >
  < ul >
   < li >< a  href ="#" > 微软和谷歌对浏览器的垄断会导致Web的私有化吗?  </ a ></ li >
   < li >< a  href ="#" > Subversion高级应用:SVN的多种认证方式 </ a ></ li >
   < li >< a  href ="#" > 年度总结:2008年Java工具 </ a ></ li >
   < li >< a  href ="#" > 要不要把IT主导权还给业务人员?  </ a ></ li >
   < li >< a  href ="#" > IT专家网08年回顾:开发语言与开发平台共舞  </ a ></ li >
   < li >< a  href ="#" > 下一代网络业务融合 </ a ></ li >
   < li >< a  href ="#" > 方正科技七大优势 打造全流程专业外包 </ a ></ li >
   < li >< a  href ="#" > 08回顾:Oracle能否继续领跑者数据库市场?  </ a ></ li >
   < li >< a  href ="#" > Web安全性问题的层次关系分析 </ a ></ li >
   < li >< a  href ="#" > 从融合至存储 以太网成企业网络终极答案 </ a ></ li >
  </ ul >
</ div >
< div  id ="showhint" ></ div >
< script  type ="text/javascript" >
function  $(element){
  if (arguments.length > 1 ){
   for ( var  i = 0 ,length = arguments.length,elements = [];i < length;i ++ ){
   elements.push($(arguments[i]));
  }
   return  elements;
 }
  if ( typeof  element == " string " ){
   return  document.getElementById(element);
 } else {
   return  element;
 }
}
var  Class = {
 create: function (){
   return   function (){
    this .initialize.apply( this ,arguments);
  }
 }
}
Function.prototype.bind = function (object){
  var  method = this ;
  return   function (){
  method.apply(object,arguments);
 }
}
var  Scroll = Class.create();
Scroll.prototype = {
 initialize: function (element,height){
   this .element = $(element);
   this .element.innerHTML += this .element.innerHTML;
   this .height = height;
   this .maxHeight = this .element.scrollHeight / 2;
   this .counter = 0 ;
   this .scroll();
   this .timer = "" ;
   this .element.onmouseover = this .stop.bind( this );
   this .element.onmouseout = function (){ this .timer = setTimeout( this .scroll.bind( this ), 1000 );}.bind( this );
 },
 scroll: function (){
   if ( this .element.scrollTop < this .maxHeight){
    this .element.scrollTop ++ ;
    this .counter ++ ;
  } else {
    this .element.scrollTop = 0 ;
    this .counter = 0 ;
  }
  
   if ( this .counter < this .height){
    this .timer = setTimeout( this .scroll.bind( this ), 20 );
  } else {
    this .counter = 0 ;
    this .timer = setTimeout( this .scroll.bind( this ), 3000 );
  }
 },
 stop: function (){
  clearTimeout( this .timer);
 }
}
var  myscroll = new  Scroll( " myscroll " , 24 );
</ script >
</ body >
</ html >