It's not hard for me to be ashamed to do this function, but I still encounter various problems. Here's a note:
This is my home page. A notice appears on the top of the home page to let users see the latest information

Find "marquee" plug-in Online

Refer to:
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

Of course, you can also refer to me to obtain the complete columns of dynamic data:
jsp:
First: you can refer to the first link:
Load css js
jsp code

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

css can be changed to what you need: the official style is "write dead", which can be changed. This is my project's change:

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

Then js:

function getinform(){
   $.ajax({
     url: 'messageShow/getContentHome.do',     
      type: 'post',                 //Get data by: post/get           
      dataType:'json',            //data format
      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($(this));'>"
                marqueeHtml+="["+title+"]";
                marqueeHtml+=(content+"!");
                marqueeHtml+=create_time;
            marqueeHtml+="</li>";
        }
        //Splicing li
        $("#marquee").append(marqueeHtml);
        //Call method  
        $("#marquee").marquee();
      }
   });
 }

Finally, initialize the method. The background method is getall to query all of them. Although it's not difficult, there is a problem during the process. At the beginning, the official demo is used directly, Then, we use the splicing method to generate no data, only the simulation data can be generated, which may be the same reason that I call the method directly as the demo. Then we need to click the scrolling text to display the details. Solution:
Add an onclick event to li, get the value of each li, and then display the data.
Function:

function show_li_message(obj){
        $("#update-content").val();
        var obj = data.data; 
        $("#content_show").val(obj.title+"      "+obj.content+"     "+obj.create_time);
        $("#update-content").modal('show');
    }