今天记录又一个小特效。上次写了个轮播图，
思路是一个图片列表滚动，滚动到一定距离，把图片列表的第一张图片添加到最后一张。
这次是图片文字无缝滚动。也弥补了marquee不能无缝滚动不足。
html如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无缝滚动</title>
</head>
<body>
<div id="gd">
<div id="gdbox">
<div id="box1">
星星之所以美丽，是因为它的某一颗上有一朵看不见的花。沙漠之所以美丽，是因为它的某一个地方藏着一口井。丽家园！
</div>
<div id="box2"></div>
</div>
</div>
</body>
</html>
css:
<style>
#gd{700px;height:110px;overflow:hidden;margin-top:5px;margin-bottom:5px;border: 1px solid #ccc}//此处一定要加溢出隐藏。
#gdbox{float:left; 1000%;height:100px}//滚动列表要大于父盒子。
#box1,#box2{float:left;}
</style>
JavaScript：
<script>
window.onload=function(){
var speed=20;
var tab=document.getElementById("gd");//特别注意这个是获取最外面一层的盒子，就是溢出隐藏的盒子。
var tab1=document.getElementById("box1");
var tab2=document.getElementById("box2");
tab2.innerHTML=tab1.innerHTML; //通过赋值获得tab1的值。内容相当于一份
function marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//当tab的移动宽度大于等于demo1的时候，scrollLeft为0，也就是恢复到未移动前的情况，继续移动
{tab.scrollLeft=0}
else
{tab.scrollLeft++;//盒子每次向左边移动一个像素。
}
}
var timer=setInterval(marquee,speed); //定时器
tab.onmouseover=function(){clearInterval(timer)};
tab.onmouseout=function(){timer=setInterval(marquee,speed);}
}
</script>
懒癌又犯了，下次有空再学点别的内容，再更新一下博客