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>

 

posted on 2013-05-15 09:48  startup  阅读(951)  评论(0)  编辑  收藏  举报

导航