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