So legen Sie fest, dass Text in JQuery kontinuierlich gescrollt wird-js-Tutorial-php.cn

So legen Sie fest, dass Text in JQuery kontinuierlich gescrollt wird

coldplay.xixi

Freigeben： 2020-11-17 15:33:17

Original

2013 Leute haben es durchsucht

So richten Sie ununterbrochenes Scrollen von Text in JQuery ein: 1. Einzeiliges Scrollen, der Code lautet [$(this).css({marginTop:"0px"}).find("li:first").appendTo ()]; 2, Mehrzeiliges Scrollen, der Code lautet [Scroll:function()].

So legen Sie fest, dass Text in JQuery kontinuierlich gescrollt wird

So richten Sie ununterbrochenes Scrollen von Text in jquery ein:

1. Einzeiliges Scrollen

rrree

3. Steuerbares Vorwärts- und Rückwärtsscrollen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function AutoScroll(obj){
        $(obj).find("ul:first").animate({
                marginTop:"-25px"
        },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
}
$(document).ready(function(){
setInterval(&#39;AutoScroll("#scrollDiv")&#39;,1000)
});
</script>
</head>
<body>
<div id="scrollDiv">
<ul>
    <li>这是公告标题的第一行</li>
    <li>这是公告标题的第二行</li>
    <li>这是公告标题的第三行</li>
    <li>这是公告标题的第四行</li>
    <li>这是公告标题的第五行</li>
    <li>这是公告标题的第六行</li>
    <li>这是公告标题的第七行</li>
    <li>这是公告标题的第八行</li>
</ul>
</div>
</body>
</html>

Nach dem Login kopieren

Verwandte kostenlose Lernempfehlungen:

JavaScript
(Video)

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass Text in JQuery kontinuierlich gescrollt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!