收藏一个marquee无缝滚动例子

<mce: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;  
}  
--></mce:style><style type="text/css" mce_bogus="1">#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="#" mce_href="#"><img src="http://www.m663.com/logo/mlwl.gif" mce_src="http://www.m663.com/logo/mlwl.gif" border="0" /></a>  
<a href="#" mce_href="#"><img src="http://www.m663.com/logo/mlwl.gif" mce_src="http://www.m663.com/logo/mlwl.gif" border="0" /></a>  
<a href="#" mce_href="#"><img src="http://www.m663.com/logo/mlwl.gif" mce_src="http://www.m663.com/logo/mlwl.gif" border="0" /></a>  
<a href="#" mce_href="#"><img src="http://www.m663.com/logo/mlwl.gif" mce_src="http://www.m663.com/logo/mlwl.gif" border="0" /></a>  
<a href="#" mce_href="#"><img src="http://www.m663.com/logo/mlwl.gif" mce_src="http://www.m663.com/logo/mlwl.gif" border="0" /></a>  
<a href="#" mce_href="#"><img src="http://www.m663.com/logo/mlwl.gif" mce_src="http://www.m663.com/logo/mlwl.gif" border="0" /></a>  
</div>  
<div id="demo2"></div>  
</div>  
</div>  
<mce:script type="text/javascript"><!--  
var speed=10; //数字越大速度越慢  
var tab=document.getElementById("demo");  
var tab1=document.getElementById("demo1");  
var tab2=document.getElementById("demo2");  
tab2.innerHTML=tab1.innerHTML;  
function Marquee(){  
if(tab2.offsetWidth-tab.scrollLeft<=0)  
tab.scrollLeft-=tab1.offsetWidth  
else{  
tab.scrollLeft++;  
}  
}  
var MyMar=setInterval(Marquee,speed);  
tab.onmouseover=function() {clearInterval(MyMar)};  
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};  
// --></mce:script>  


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lihan6415151528/archive/2009/03/19/4003830.aspx

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: