marquee 无缝滚动

marquee 无缝滚动

代码

<style type="text/css">
#demo {
overflow:hidden;
height: 110px;
text-align: left;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
</style>
<div id="demo">
<div id="demo1">
<h4>
一、开放时间</h4>
<p>
我馆自2011年12月1日起，一年365天全年开馆，市民持有效证件即可进馆参观。</p>
<h4>
二、入场时间</h4>
<p>
每天开放时间为9：30―16：00。</p>
<h4>
三、参观须知</h4>
<ul>
<li>
1. 自觉遵守本馆参观制度，听从工作人员引导。</li>
<li>
2. 注意保持环境干净、卫生、舒适。展厅内严禁吸烟、饮食、追逐打闹、攀爬躺卧、随地吐痰、乱扔废弃物等不文明行为。</li>
<li>
3. 请自觉保持安静，不要大声喧哗。</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div id="demo2"></div>
</div>
<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(tab1.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab2.offsetHeight; //demo跳到最顶端
else{
tab.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>