div+js实现内容上下不间断滚动
1、页面代码
<!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>
<title>K2046.ScrollText</title>
<style type="text/css">
.title{height:28px;width:150px;line-height:28px;text-align:center;border-bottom:solid 1px #888888;background-color:#EEEEEE;}
.fleft{float:left;margin-left:20px;font-size:12px;}
.listscroll{border:solid 1px #888888;width:150px;text-align:left;}
#listdown,#listmarquee,#listcontent{height:179px;width:150px;overflow:hidden;}
.listpro{height:59px;width:130px;line-height:20px;overflow:hidden;border-bottom:dashed 1px #AAAAAA;margin-left:10px;}
.remark{margin-top:10px;line-height:18px;}
</style>
<script language="javascript" type="text/javascript">
window.onload = function()
{
var marquee = new ScrollText("listmarquee");
marquee.LineHeight = 60;
marquee.Amount = 1;
marquee.Timeout = 30;
marquee.Delay = 30;
marquee.Start();
}
function ScrollText(content,btnPrevious,btnNext,autoStart)
{
this.Delay = 10;
this.LineHeight = 20;
this.Amount = 1;//注意:LineHeight一定要能整除Amount.
this.Direction = "up";
this.Timeout = 1500;
this.ScrollContent = this.$(content);
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
//this.ScrollContent.scrollTop = 0;
if(btnNext)
{
this.NextButton = this.$(btnNext);
this.NextButton.onclick = this.GetFunction(this,"Next");
this.NextButton. = this.GetFunction(this,"Stop");
this.NextButton. = this.GetFunction(this,"Start");
}
if(btnPrevious)
{
this.PreviousButton = this.$(btnPrevious);
this.PreviousButton.onclick = this.GetFunction(this,"Previous");
this.PreviousButton. = this.GetFunction(this,"Stop");
this.PreviousButton. = this.GetFunction(this,"Start");
}
this.ScrollContent. = this.GetFunction(this,"Stop");
this.ScrollContent. = this.GetFunction(this,"Start");
if(autoStart)
{
this.Start();
}
}
ScrollText.prototype.$ = function(element)
{
return document.getElementById(element);
}
ScrollText.prototype.Previous = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("up");
}
ScrollText.prototype.Next = function()
{
clearTimeout(this.AutoScrollTimer);
clearTimeout(this.ScrollTimer);
this.Scroll("down");
}
ScrollText.prototype.Start = function()
{
clearTimeout(this.AutoScrollTimer);
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
ScrollText.prototype.Stop = function()
{
clearTimeout(this.ScrollTimer);
clearTimeout(this.AutoScrollTimer);
}
ScrollText.prototype.AutoScroll = function()
{
if(this.Direction == "up")
{
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
this.ScrollContent.scrollTop += this.Amount;
}
else
{
if(parseInt(this.ScrollContent.scrollTop) <= 0)
{
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
}
this.ScrollContent.scrollTop -= this.Amount;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Delay);
}
else
{
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout);
}
}
ScrollText.prototype.Scroll = function(direction)
{
if(direction=="up")
{
if(this.ScrollContent.scrollTop == 0)
{
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
}
this.ScrollContent.scrollTop -= this.Amount;
}
else
{
this.ScrollContent.scrollTop += this.Amount;
}
if(parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2)
{
this.ScrollContent.scrollTop = 0;
}
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0)
{
this.ScrollTimer = setTimeout(this.GetFunction(this,"Scroll",direction), this.Delay);
}
}
ScrollText.prototype.GetFunction = function(variable,method,param)
{
return function()
{
variable[method](param);
}
}
</script>
</head>
<body>
<div class="fleft">
<div class="listscroll">
<div class="title">最新产品</div>
<div id="listmarquee">
<div class="listpro">
名称:最新商品1<br />
描述:最新商品1到货了.<br />
价格:￥999.99
</div>
<div class="listpro">
名称:最新商品2<br />
描述:最新商品2到货了.<br />
价格:￥999.99
</div>
<div class="listpro">
名称:最新商品3<br />
描述:最新商品3到货了.<br />
价格:￥999.99
</div>
<div class="listpro">
名称:最新商品4<br />
描述:最新商品4到货了.<br />
价格:￥999.99
</div>
</div>
</div>
</div>
</body>
</html>