实现滚动的公告标题以及公告详情文本框

<style type="text/css">

*{

    margin:0;
    padding:0;
    }
    .huadong {width: 60rem;height:4rem;padding: 0.5rem 0 0.3rem 0; border-bottom: 1px solid #F0F0F0; position:relative;font: 12px/1.5 "Hiragino Sans GB","Microsoft YaHei",simsun;margin:0 auto;}
    
    .huadong .huabox {  margin:0 auto; width: 100%; line-height: 2rem;}
    
    .huadong .hdimg {float:left;line-height:3.5rem;}
    .huadong .hdimg img { width: 100%; vertical-align:middle;}
    .huadong h5 {font-size:2rem;float:left; line-height: 2.2rem; margin: 0.8rem 0 0 0; }
    .huadong .gg_more { float: left;}
    .huadong .gg_more a { font-size: 0.8rem; text-decoration:none;}
    
    .huadong .notice_active {
            float: left;
            width: 100%;
            height: 10rem;
            padding: 0;
            overflow: hidden;
            position: relative;
    }
    
    #annunceul{
    margin-top:0.7rem;
    }

    .huadong .notice_active li{list-style-type:none;line-height: 2rem;margin-bottom:20rem;overflow: hidden;}

    .huadong .notice_active li.notice_active_ch span {color:#656972;font-size:2rem;display: block;overflow: hidden; width:100%;float: left;
    overflow: hidden;margin:0 0 2rem 0;}
    .huadong .notice_active li.notice_active_ch textarea {display: block;overflow: hidden; width:100%;height:10rem;overflow-y:auto;cursor: pointer }
    
    .huadong .gg_more .news_ck {
            float: left;
            margin: 0 1rem 0 1rem;
            color: #888;
            width: 5rem;
            height: 2rem;
            line-height: 2rem;
            display: block;
            border: 1px solid #656972;
            text-align: center;
            border-radius: 0.7rem;
            font-size: 0.8rem;
            margin-top: 1rem;
        }
    .huadong .gg_more .news_more {
        
    }

    .huadong .notice_active li.notice_active_ch em {text-align:left;float:right;color:#888;font-size:0.8rem;font-style:normal;  }

</style>

<!-- 动态显示公告标题 -->

<div class="huadong" style="width: 100%;margin-top: 3%">
    <div class="huabox">
    <div class="hdimg"><img src="${staticServePath}/img/lingdang.png"></div>
    <h5><font style="color: red;size=10">【公告】</font></h5>
        <div class="notice_active" id="announce" style="width: 80%">
            <ul id ="annunceul">
                <li></li>
                <li></li>
                <li></li >
            </ul>    
        </div>
</div>

<!-- 动态显示公告详情 -->

    <div class="row" style="margin-top: 4%">
    <div class="panel panel-danger">
    <div class="panel-heading"><h4>公告详情</h4></div>
    <div class="panel-body">
        <div class="huadong" style="width: 100%">
            <div class="huabox">
                          <div class="notice_active">
                          <ul id=announcedetail></ul>
                          </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

实现滚动的js代码;

<script type="text/javascript">
    function timer(opj){
        $(opj).find('ul').animate({
            marginTop : "-3.5rem"  
            },500,function(){  
            $(this).css({marginTop : "0.7rem"}).find("li:first").appendTo(this);  
        })  
    }
    $(function(){
        var num = $('.notice_active').find('li').length;
        if(num > 1){
           var time=setInterval('timer(".notice_active")',10000);
            $('.gg_more a').mousemove(function(){
                clearInterval(time);
            }).mouseout(function(){
                time = setInterval('timer(".notice_active")',10000);
            });
        }
        $(".news_ck").click(function(){
            location.href = $(".notice_active .notice_active_ch").children(":input").val();
        })    
    });
</script>

js代码（使用ajax从后台获取数据）：

 <script type="text/javascript">
window.οnlοad=function(){
    $.ajax({
         type: "POST",
         url:"${servePath}/systemHome/showAnnounce",
        
            success : function(data) {
                var aul = document.getElementById("annunceul");
                var info = document.getElementById("info");
                var bul = document.getElementById("announcedetail");
                while(aul.hasChildNodes()) //当div下还存在子节点时 循环继续
                {
                    aul.removeChild(aul.firstChild);
                }
                for(var i= 0;i<data.total;i++){
                    
                    var ali1 = document.createElement('li');
                    var ali2 = document.createElement('li');
                    var aspan =document.createElement('span');
                    var bspan = document.createElement('textarea');
                    bspan.className = "form-control";
                    bspan.setAttribute("disabled","disabled");
                    bspan.setAttribute("overflow-y","scroll");
                    
                    aspan.setAttribute('id','aspan'+data.rows[i].ID);//设置ID属性
                    var a = data.rows[i].ID;
                    ali1.className = "notice_active_ch";
                    ali2.className = "notice_active_ch";
                    
                    /* 设置值 */
                    aspan.innerHTML=data.rows[i].TITLE;
                    bspan.innerHTML=data.rows[i].CONTENT;
                    
                    ali1.appendChild(aspan);
                    ali2.appendChild(bspan);
                    aul.appendChild(ali1);
                    bul.appendChild(ali2);
                     $("#aspan"+a).append('<button id="confirm" class="btn btn-success" οnclick=setdata("'+a+'")  type="button" style="margin-left: 45%">查看详情</button>');        
                }
                /* 设置并且显示连接的系统名称 */
                 for(var j= 0;j<data.sysInfoTotal;j++){
                     var infoli = document.createElement('li');
                     infoli.innerHTML = data.sysInfo[j].DBNAME;
                     info.appendChild(infoli);
                 }
            }
    });
        
}

</script>

效果如下：