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');
}