js文字向下滚动
js文字向下滚动!!!!!!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=GBK"> <title>js 文字上下滚动 </title> <style type='text/css'> div{ width:300px; height:120px; text-align:center; } </style> <script language="javascript" type="text/javascript"> var content=null,c1=null,c2=null,time=null; function load(){ content=document.getElementByIdx("content"); c1=document.getElementByIdx("c1"); c2=document.getElementByIdx("c2"); c2.innerHTML=c1.innerHTML; } function up(){ if(c2.offsetHeight-content.scrollTop<=0){//当c2本身高度(120)-content卷起高度<=0证明c2完全出现需要设置content.scrollTop=0重新开始。offsetHeight 实际高度,不包含隐藏部分(示例为120); content.scrollTop=0;//scrollTop 卷起高度 }else{ content.scrollTop++;//id为content的DIV,scrollTop逐渐向上卷起..c2随之出现 } } function down(){ if (c1.scrollTop - content.scrollTop >= 0) { content.scrollTop += c2.offsetHeight; } else { content.scrollTop--; } } function upOrDown(v){ clearInterval(time); switch (v) { case "up": time=setInterval(up,30); break; case "down": time=setInterval(down,30); break; case "stop": content.scrollTop=0; break; } } </script> </head> <body onload='load()'> <div style='margin:0px auto;'> <div id='content' style='background-color:#ff0000;overflow:hidden;'> <div id='c1'>IE FF 无差异</div> <div id='c2'></div> </div> <select onchange='upOrDown(this.value)'> <option value='up'>向上移动</option> <option value='down'>向下移动</option> <option value='stop'selected>停止移动</option> </select> </div> </body> </html>