javascript无缝滚动
代码
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!-- conainer设置超过自身大小则隐藏,实际应用中我们将overflow设置为hidden-->
<div id="container" style="overflow:auto;height:80px; width:200px;">
<div id="roll1" >
<table style="height:80px;">
<!--设置里面的HTML控件尺度为与上面的最外层的一样或大于最外层,子容器的高度必须大于父容器,才能一直滚动-->
<!--因为:roll1.offsetHeight-container.scrollTop<=0如果不能小于0的话只能滚动一次.-->
<tr>
<td>111111111111111</td>
</tr>
<tr></tr>
</table>
</div>
<div id="roll2"></div>
</div>
<script type="text/javascript">
var speed=50;
var container=document.getElementById("container");
var roll1=document.getElementById("roll1");
var roll2=document.getElementById("roll2");
roll2.innerHTML=roll1.innerHTML;//克隆roll2为roll1;
/*offsetHeight是html控件自身高度,scrollTop垂直方向滚动的值,offsetTop距上方或上层控件的距离*/
function Marquee(){
if(roll1.offsetHeight-container.scrollTop<=0){//当滚动至roll1和roll2的交界处
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!-- conainer设置超过自身大小则隐藏,实际应用中我们将overflow设置为hidden-->
<div id="container" style="overflow:auto;height:80px; width:200px;">
<div id="roll1" >
<table style="height:80px;">
<!--设置里面的HTML控件尺度为与上面的最外层的一样或大于最外层,子容器的高度必须大于父容器,才能一直滚动-->
<!--因为:roll1.offsetHeight-container.scrollTop<=0如果不能小于0的话只能滚动一次.-->
<tr>
<td>111111111111111</td>
</tr>
<tr></tr>
</table>
</div>
<div id="roll2"></div>
</div>
<script type="text/javascript">
var speed=50;
var container=document.getElementById("container");
var roll1=document.getElementById("roll1");
var roll2=document.getElementById("roll2");
roll2.innerHTML=roll1.innerHTML;//克隆roll2为roll1;
/*offsetHeight是html控件自身高度,scrollTop垂直方向滚动的值,offsetTop距上方或上层控件的距离*/
function Marquee(){
if(roll1.offsetHeight-container.scrollTop<=0){//当滚动至roll1和roll2的交界处
/*看到有些人在判断这里喜欢写roll2.offsetTop-container.scrollTop,如果使用这种写法
那么这里的roll1的高度设置要大于container的高度10px左右,否则会只滚动一次,是因为container.scrollTop的值小于
roll2.offsetTop造成的,所以推荐用offsetHeight.*/
/*为什么container.scrollTop会小于roll2.offsetTop呢?
就拿这里的例子来说事:container设置高度为80px,那么它的container.scrollTop的滚动值最大为80,而offsetTop距上方
控件的距离为89,那么就会造成roll2.offsetTop-containner.scrollTop不可能小于或等于0，所以只会滚动一次.*/
container.scrollTop-=roll1.offsetHeight;//跳到最顶端
}else{
container.scrollTop++;
}
}
var myMar=setInterval(Marquee,speed);
window.onmouseover=function(){clearInterval(myMar);}
window.onmouseout=function(){myMar=setInterval(Marquee,speed);}
</script>
</body>
</html>
}else{
container.scrollTop++;
}
}
var myMar=setInterval(Marquee,speed);
window.onmouseover=function(){clearInterval(myMar);}
window.onmouseout=function(){myMar=setInterval(Marquee,speed);}
</script>
</body>
</html>
以上是垂直的
下面我们来看下水平的代码:
代码
<script>
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;//克隆demo1为demo2
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//当滚动至demo1与demo2交界时
tab.scrollLeft-=tab1.offsetWidth//demo1跳到最左端
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重新设定时器（继续滚）
</script>
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;//克隆demo1为demo2
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//当滚动至demo1与demo2交界时
tab.scrollLeft-=tab1.offsetWidth//demo1跳到最左端
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重新设定时器（继续滚）
</script>
