经常看到一组图片或内容在一定时间内循环滚动得效果,下面是代码,可以自己运行看看,在这里面主要有三个参数;startmarquee(lh,speed,delay) lh是class为ir得div得行高也是高度,当lh为一个行高时,每次滚动向前滚动一项,lh为2个行高时,向前滚动2项,以此类推,与此同时<DIV style="OVERFLOW: hidden; LINE-HEIGHT: 66px; HEIGHT: 66px; border:solid 1px #f00">得高度要跟着相应改变,speed是滚动得速度,delay是滚动完一次后停顿得时间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.ir{
height:22px;
line-height:22px;
font-size:14px;
}
</style>
</head>
<body>
<DIV style="OVERFLOW: hidden; LINE-HEIGHT: 66px; HEIGHT: 66px; border:solid 1px #f00">
<DIV id=marqueebox style="MARGIN-TOP: -22px">
<DIV class=ir><A href="http://tieba.baidu.com/f?kz=336592214&bl=tbkd_03"
target=_blank>美妙歌声来自吧友的倾情翻唱</A></DIV>
<DIV class=ir><A href="http://tieba.baidu.com/f?kz=344258201&bl=tbkd_04"
target=_blank>周杰伦演唱会抢票</A></DIV>
<DIV class=ir><A href="http://tieba.baidu.com/f?kz=343094288&bl=tbkd_05"
target=_blank>[吧友活动]贴吧专访</A></DIV>
<DIV class=ir><A href="http://tieba.baidu.com/f?kz=336592214&bl=tbkd_03"
target=_blank>gfgf</A></DIV>
<DIV class=ir><A href="http://tieba.baidu.com/f?kz=344258201&bl=tbkd_04"
target=_blank>gfgfgfgfg</A></DIV>
<DIV class=ir><A href="http://tieba.baidu.com/f?kz=343094288&bl=tbkd_05"
target=_blank>fgfdgdfgfdgfg</A></DIV>
</DIV>
</DIV>
<SCRIPT>
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.οnmοuseοver=function(){p=true;}
o.οnmοuseοut=function(){p=false;}
function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0)
{
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}
else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(66,20,3500);
</SCRIPT>
</body>
</html>
trackback:http://hi.baidu.com/kongqi1027/blog/item/66ebe32b1f36eafee7cd404e.html