java 通知跑馬燈效果 （文字滾動）

說來慚愧 做這個功能讓我苦惱了不少，不難，但還是遇到各種問題。在這記一下：
我的這個是首頁 在最上面出現一個通知跑馬燈 讓用戶看到最新信息

網上查到《marquee》插件

可以參考：
https://www.givainc.com/labs/marquee_jquery_plugin.cfm
http://blog.csdn.net/z69183787/article/details/38825513
http://www.jb51.net/article/23526.htm
http://www.jb51.net/article/23526.htm

當然也可以參考我這個 ，獲取動態數據的完整列子：
jsp:
首先：可以參考第一條鏈接：
加載css js
jsp的代碼

<div>
        <ul id="marquee" class="marquee" style="margin-top: 10px;margin-left: 14.5px;" >
        </ul>
    </div>

css可以改成自己需要的：官方的是寫死的樣式，可以改 ，這是我項目改的：

ul.marquee {
    /* required styles */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    position: relative;
    overflow: hidden;
    /* optional styles for appearance */
    width: 97.5%;
    height: 40px; /* height should be included to reserve visual space for the marquee */
    /*border: 1px solid #08084d;*/
    background-color: #3a99d9;
}

ul.marquee li {
    /* required styles */
    position: absolute;
    top: -999em;
    left: 0;
    display: block;
    white-space: nowrap; /* keep all text on a single line */

    /* optional styles for appearance */
    font: 20px Arial, Helvetica, sans-serif;
    color:white;
    padding: 3px 5px;
}

然後是js:

function getinform(){
   $.ajax({
     url: 'messageShow/getContentHome.do',     
      type: 'post',                 //獲取數據方式:post/get           
      dataType:'json',            //數據格式
      success:function(data){  
        var obj = data.data;
        var len = obj.length;

        $("#marquee").empty();
        var marqueeHtml = "";
        for(var i=0;i<len;i++){
            var title= obj[i].title;
            var content= obj[i].content;
            var create_time = obj[i].create_time;

            if(create_time != null)
                create_time = parseTime_x(create_time);
            else
                create_time = "";
            marqueeHtml+="<li onclick='show_li_message(\""+title+"\",\""+content+"\",\""+create_time+"\");'>";
                marqueeHtml+="【"+title+"】";
                marqueeHtml+=(content+"！");
                marqueeHtml+=create_time;
            marqueeHtml+="</li>";
        }
        //拼接li
        $("#marquee").append(marqueeHtml);
        //調用方法  
        $("#marquee").marquee();
      }
   });
 }

最後進行方法的初始化，後臺的方法就是getall 查詢所有的，雖然也不難，但做的時候遇到了問題 ，剛開始直接用官方demo ,然後採用拼接出不來數據，只有模擬數據纔可以出來，可能是我調用方法直接與demo一樣的原因，然後我們還需要點擊滾動文字還可以出現詳情，解決方法：
拿到每個《li》的值 ，然後進行數據展示。
函數：

function show_li_message(title,content,create_time){
        $("#title_show").val(title);
        $("#content_show").val(content);
        $("#creat_time_show").val(create_time);
        $("#update-content").modal('show');
}