跨浏览器问题

<%@page import="com.pictureroll.entity.WordBean"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=gb2312"
    pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文字滚动最终版</title>
<style type="text/css">
a:link {color: blue; text-decoration:none;}
a:visited {color:blue;text-decoration:none;}
a:hover {color: red; text-decoration:underline;} 
</style>
</head>
<body>
<div id="scroll_begin">
<ul >
<% ArrayList list = (ArrayList)session.getAttribute("word");
for(int i = 0;i<list.size();i++){
WordBean wb =(WordBean) list.get(i);
%>
<li ><a href=<%=wb.getWord_url() %> target="_blank"><%=wb.getWord()%></a></li>
<br>
<%} %>
</ul>
</div> 
<script language="JavaScript">scroll_beginHeight=200;
stopscroll=false;with(scroll_begin){
style.width=300;
style.height=120;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');preTop=0; currentTop=0;function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<scroll_beginHeight){
templayer.innerHTML+=scroll_begin.innerHTML;
}
scroll_begin.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",100);
}
document.body.onload=init;function scrollUp(){
if(stopscroll==true) return;
preTop=scroll_begin.scrollTop;
scroll_begin.scrollTop+=1;
if(preTop==scroll_begin.scrollTop){
scroll_begin.scrollTop=templayer.offsetHeight-scroll_beginHeight;
scroll_begin.scrollTop+=1;
}
}
</script>
</body>
</html>
上面的代码的文字滚动 只能支持IE，不能支持火狐，求大神帮忙解决  

解决方案 »

  1.   

    scroll_beginHeight=200;
    style.width=300;
    style.height=120;
    preTop=0; currentTop=0;是在这几个后面加PX吗？
      

  2.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    ul {
    margin:100px;
    height:72px; border:1px solid red;
    overflow:hidden;
    }
    li {
    height:24px; line-height:24px; font-size:12px;
    }
    </style>
    </head>
    <body>
    <ul id="a">
    <li>1-1</li>
    <li>1-2</li>
    <li>1-3</li>
    <li>1-4</li>
    </ul>
    <script>
    //document.getElementById()的最简化应用
    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,delay){
    this.element=$(element);
    this.element.innerHTML+=this.element.innerHTML;
    this.height=height;
    this.delay=delay*1000;
    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),5);
    }else{
    this.counter=0;
    this.timer=setTimeout(this.scroll.bind(this),this.delay);
    }
    },
    stop:function(){
    clearTimeout(this.timer);
    }
    }
    new Scroll('a', 24, .2)
    </script>
    </body>
    </html>
    楼主参考下这个 滚动实例吧