想必大家都注意到<marquee>的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出<marquee>，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。在原作者的基础上做了一定修改，主要还是在样式上面，将表格更换为标签。并且将JavaScript标准化，可以在所有浏览器运行。先了解一下对象的几个的属性： innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight:获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 图片上无缝滚动
>> CODE <styletype="text/css">
<!--
#demo{
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img{
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
<script>
<!--
varspeed=10; //数字越大速度越慢
vartab=document.getElementByIdx_x("demo");
vartab1=document.getElementByIdx_x("demo1");
vartab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
functionMarquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
varMyMar=setInterval(Marquee,speed);
tab.onmouseover=function(){clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
图片下无缝滚动
程序代码
<style type="text/css">
<!--
#demo{
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img{
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
<script>
<!--
varspeed=10; //数字越大速度越慢
vartab=document.getElementByIdx_x("demo");
vartab1=document.getElementByIdx_x("demo1");
vartab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
functionMarquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
varMyMar=setInterval(Marquee,speed);
tab.onmouseover=function(){clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
图片左无缝滚动
程序代码
<style type="text/css">
<!--
#demo{
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img{
border: 3px solid #F2F2F2;
}
#indemo{
float: left;
width: 800%;
}
#demo1{
float: left;
}
#demo2{
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
</div>
<script>
<!--
varspeed=10; //数字越大速度越慢
vartab=document.getElementByIdx_x("demo");
vartab1=document.getElementByIdx_x("demo1");
vartab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML;
functionMarquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
varMyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
图片右无缝滚动
程序代码
<style type="text/css">
<!--
#demo{
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img{
border: 3px solid #F2F2F2;
}
#indemo{
float: left;
width: 800%;
}
#demo1{
float: left;
}
#demo2{
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
<a href="#"><imgsrc="http://www.cnrui.cn/other/link/Clear_logo.gif"border="0"/></a>
</div>
<divid="demo2"></div>
</div>
</div>
<script>
<!--
varspeed=10; //数字越大速度越慢
vartab=document.getElementByIdx_x("demo");
vartab1=document.getElementByIdx_x("demo1");
vartab2=document.getElementByIdx_x("demo2");
tab2.innerHTML=tab1.innerHTML;
functionMarquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
varMyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
