A very easy-to-use case of text scrolling, the mouse can be suspended, very easy to use text scrolling

A very easy-to-use case of text scrolling, the mouse can be suspended, very easy to use text scrolling

I have found a lot on the Internet, and the core of the writing is the same. Here I will give you a summary and I can add it to my favorites.

Html:

<Div class = "scroll"> <ul class = "list"> <li> <a href = "#" target = "_ blank"> announcement 1 or winner a </ a> </li> <a href = "#" target = "_ blank"> announcement 2 or winner B </a> </li> <a href = "#" target = "_ blank"> announcement 3 or winner C </a> </li> </ul> </div>

 

Resolution: This method is applicable to the announcement categories that only show one row, as well as the large boxes that show the winning list/lottery results. You can change the list height.

Solution 1:

function autoScroll(obj) {    $(obj).find(".list").animate({        marginTop: "-25px"    }, 1000, function () {        $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);    })}var timer = setInterval('autoScroll(".scroll")', 1000);$(function () {    $(".scroll").hover(function () {        clearInterval(timer);    }, function () {        timer = setInterval('autoScroll(".scroll")', 1000);    })})

 

Solution 2:

function autoScroll(obj) {    //var _t;    function scroll() {        $(obj).find(".list").animate({            marginTop: "-25px"        }, 500, function () {            $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);        })    }    var timer = setInterval(scroll, 2800);    $(obj).hover(        function () {            clearInterval(_t);        },        function () {            timer = setInterval(scroll, 2800);        }    )}$(function () {    autoScroll(".scroll");})

 

Resolution: The functions of the two solutions are the same. They are implemented by changing the value of margin-top and adding the first one to the last one. The first method is to directly write down the running step. The timer can be defined outside the loading function or written in it, but the following content must be written in the loading function; otherwise, it cannot be executed normally.

If it is defined as a function as a whole, You can execute it by calling the functions in the load function.

In the hover Event Callback Function, timer = setInterval () must be written, which means that the timer is assigned to the timer again and the setInterval is directly written, if var timer = setInterval () is written (); then a new timer is redefined, which also does not work.