So implementieren Sie mit js scrollende Ankündigungen nach oben und unten

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von 10 Zeilen JS-Code ein, um den rollierenden Ankündigungseffekt zu erzielen. Der Artikel stellt ihn im Detail anhand des Beispielcodes vor. Er hat einen gewissen Referenz-Lernwert für alle, die lernen oder arbeiten Wer braucht es? Schauen wir uns das unten mit dem Herausgeber an.

Anforderungen

In einem aktuellen Projekt ist es notwendig, den scrollenden Anzeigeeffekt des Bulletin Boards wie folgt zu erreichen:

Lösung

1. HTML

Erstellen Sie zunächst eine p-Ebene als der Ankündigungsanzeigebereich, innerhalb einer Ankündigungsliste (ul);

<p class="notice">
 <ul>
 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
 <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
 </ul>
</p>

2. CSS

Legen Sie die Höhe des Anzeigebereichs der Ankündigungsleiste (35 Pixel) fest Höhe jeder Ankündigungsnachricht (li) Es muss auch diese Höhe sein (ich habe hier die Zeilenhöhe verwendet, weil ich faul war), und dieser Wert wird später in js verwendet.

 p,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
 width: 300px;/*单行显示，超出隐藏*/
 height: 35px;/*固定公告栏显示区域的高度*/
 padding: 0 30px;
 background-color: #b3effe;
 overflow: hidden;
}
.notice ul li {
 list-style: none;
 line-height: 35px;
 /*以下为了单行显示，超出隐藏*/
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

3. JavaScript

Kapselungsfunktion NoticeUp.js

Verwenden Sie die jquery animate-Methode, um den marginTop-Wert der Liste ul zu ändern, um das zu erreichen Scrolling-Effekt;

Wissenspunkte:

1. Die Animations-Rückruffunktion ist die Funktion, die nach der Ausführung der Animationsfunktion ausgeführt werden soll.

2. appendTo()-Methode

Fügt den angegebenen Inhalt am Ende des ausgewählten Elements ein (immer noch darin).

Hinweis: Der angegebene Inhalt besteht aus bestimmten Elementen auf der aktuellen Seite. Diese Elemente verschwinden dann von ihren ursprünglichen Positionen. Kurz gesagt handelt es sich dabei um einen Verschiebevorgang und nicht um einen Kopiervorgang.

/*
* 参数说明
* obj : 动画的节点，本例中是ul
* top : 动画的高度，本例中是-35px;注意向上滚动是负数
* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
* 
*/ 
function noticeUp(obj,top,time) {
 $(obj).animate({
 marginTop: top
 }, time, function () {
 $(this).css({marginTop:"0"}).find(":first").appendTo(this);
 })
}

4. Aufrufen der Kapselungsfunktion

Stellen Sie zunächst die jQuery-Bibliothek und ihr eigenes Kapselungs-Plug-in vor

Verwenden Sie den Timer setInterval, um die zu steuern Anzeige der Ankündigungsinformationen Das Zeitintervall beträgt in diesem Fall 2000 Millisekunden

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="noticeUp.js"></script>
 <script>
 $(function () {
 // 调用 公告滚动函数
 setInterval("noticeUp(&#39;.notice ul&#39;,&#39;-35px&#39;,500)", 2000);
 });
</script>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie man mit JS die parabolische Flugbahnbewegung einer kleinen Kugel realisiert

Wie man eine Webversion implementiert des Rechners in JS

So entfernen Sie das #-Zeichen aus der URL in Angular2 (ausführliches Tutorial)

Verwendung von Klassen, Konstruktoren, und Factory-Funktionen in der Javascript-Methode

So verwenden Sie die Bibliothek mobiler Komponenten in Vue.js (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit js scrollende Ankündigungen nach oben und unten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!