10 Zeilen JS-Code, um den Ankündigungseffekt beim Auf- und Abscrollen zu erzielen

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von 10 Zeilen JS-Code zur Erzielung des Rolling-Ansage-Effekts vor. Der Artikel stellt ihn anhand des Beispielcodes ausführlich vor. Er hat einen gewissen Referenz- und Lernwert für das Studium oder die Arbeit . Freunde, die es brauchen, können folgen. Werfen wir einen Blick mit dem Herausgeber. Ich hoffe, es hilft allen.

Anforderungen

In neueren Projekten ist es notwendig, den scrollenden Anzeigeeffekt des Bulletin Boards wie folgt zu erreichen:

Lösung

1. HTML

Erste A p-Ebene dient als Ankündigungsanzeigebereich, der eine Ankündigungsliste umschließt (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>

Feste Höhe des Anzeigebereichs der Ankündigungsleiste (35 Pixel), die Höhe jeder Ankündigungsnachricht (li) muss ebenfalls dieser Höhe entsprechen (ich bin hier faul und verwende die Zeilenhöhe), dieser Wert wird später in den js verwendet.

3. JavaScript

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

Kapselungsfunktion NoticeUp.js

Verwenden Sie die jquery animate-Methode, um den Rand oben zu ändern des Listen-UL-Werts, um den Scrolleffekt zu erzielen;

Wissenspunkte:

1 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.

4. Aufrufen der gekapselten Funktion

/*
* 参数说明
* 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);
 })
}

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

Verwenden Sie das Timing. Verwenden Sie setInterval, um das Zeitintervall für die Anzeige von Ankündigungsinformationen zu steuern. In diesem Beispiel sind es 2000 Millisekunden.

Wenn Sie es für gut halten, speichern Sie es bitte.

Verwandte Empfehlungen:

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

Detaillierte Erläuterung der jQuery-Animation und Spezialeffekte

Was ist eine js-Spezialeffektmaskenebene?

JavaScript implementiert die Produktion von Spezialeffekten für ausgewählte Boxen

Das obige ist der detaillierte Inhalt von10 Zeilen JS-Code, um den Ankündigungseffekt beim Auf- und Abscrollen zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!