您的位置:首页 > Web前端 > CSS

DIV+CSS 文字向上滚动

2012-05-18 10:59 337 查看
<div id="marquees">

<a href="#">你可曾有过无数的梦想,</a><br>

<br>

<a href="#">却在时光的流逝里幻灭 </a><br>

<br>

<a href="#">你可曾对未来期待憧憬,</a><br>

<br>

<a href="#">却在成长的岁月中迷失</a><br>

<br>

</div>

</div>

<script language="JavaScript">

marqueesHeight=200;

stopscroll=false;

with(marquees){

style.width=0;

style.height=marqueesHeight;

style.overflowX="visible";

style.overflowY="hidden";

noWrap=true;

onmouseover=new Function("stopscroll=true");

onmouseout=new Function("stopscroll=false");

}

document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){

templayer.innerHTML="";

while(templayer.offsetHeight<marqueesHeight){

templayer.innerHTML+=marquees.innerHTML;

}

marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

setInterval("scrollUp()",10);

}

document.body.onload=init;

function scrollUp(){

if(stopscroll==true) return;

preTop=marquees.scrollTop;

marquees.scrollTop+=1;

if(preTop==marquees.scrollTop){

marquees.scrollTop=templayer.offsetHeight-marqueesHeight;

marquees.scrollTop+=1;

}

}

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: