![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
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 >
< 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 >