对网页不间断滚动的一些心得
<div id="demob" onmouseover="ij=1" style="border:1px solid gray;OVERFLOW: hidden; HEIGHT: 119px; width:211px "
onmouseout="ij=0">
<div id="demob1">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
可以是任何的HTML内容<br>
<font color="red">HTML</font><br>
</div>
<div id="demob2"></div>
</div>
<SCRIPT>
var ij=0;
demob2.innerHTML=demob1.innerHTML ;
//function Marquee(){
// if (ij==1)return ;
// if(demob1.offsetHeight-demob.scrollTop<=0)
// demob.scrollTop-=demob1.offsetHeight;
// else
// demob.scrollTop++ ;
//}
function Marquee(){
if (ij==1)return ;
demob.scrollTop++ ;
if(demob1.offsetHeight-demob.scrollTop<=0)
demob.scrollTop-=demob1.offsetHeight;
}
setInterval(Marquee,10)
</SCRIPT>
-------------------------------------------------------------------------------------------
<DIV id="marqshow" style="border-style:solid; border:1px; color:#ef6b6f; overflow:hidden;white-space:nowrap; width:300px;
"onmouseover="stop=true;" onmouseout="stop=false;">
<span runat="server" id="marqGoods" >横向滚动横向滚动横向滚动横向滚动横向滚动横向滚动</span>
<span id="marqGoods2"></span>
</DIV>
<script type="text/javascript">
var marqshow=document.getElementById("marqshow");
var marqGoods=document.getElementById("marqGoods");
var marqGoods2=document.getElementById("marqGoods2");
marqGoods2.innerHTML=marqGoods.innerHTML+marqGoods.innerHTML;//防止滚动域不够,多加一个
var stop=false;
function marquee(){
if(stop==true) return;
marqshow.scrollLeft++;
if(marqGoods.offsetWidth-marqshow.scrollLeft<=0){
marqshow.scrollLeft-=marqGoods.offsetWidth;
}
}
setInterval(marquee,20);
</script>
说明:
1,offsetHeight与offsetTop是固定不变的,而demob.scrollTop不断增加;
2,demob的高度一定不能大于demob1的高度,不然demob的滚动域不够.demob的高度或宽度一定要固定,且有overflow:hidden属性;
3,为了防止滚动域不足可多加一个和demob2相同的div块如:demob2.innerHTML=demob1.innerHTML+demob1.innerHTML ;
4,横向时一定要设置demob的style有强制不换行属性:white-space:nowrap;