跨浏览器问题

非典型宅男c 2012-06-11 10:16:41

<%@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，不能支持火狐，求大神帮忙解决。。。

...全文

105 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

非典型宅男c 2012-06-11

打赏
举报

[Quote=引用 5 楼的回复:]
HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
ul {
margin:100px;
……
[/Quote]

非常感谢，你这个可以。

001007009 2012-06-11

打赏
举报



<!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>