Comment implémenter des annonces défilantes de haut en bas à l'aide de js

Cet article vous présente principalement les informations pertinentes sur l'utilisation de 10 lignes de code js pour obtenir l'effet d'annonce continue. L'article le présente en détail à travers l'exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. qui en a besoin Jetons un coup d'œil avec l'éditeur ci-dessous.

Exigences

Dans un projet récent, il est nécessaire d'obtenir l'effet d'affichage défilant du babillard comme suit :

Solution

1 HTML

Construisez d'abord une couche p comme. la zone d'affichage de l'annonce, à l'intérieur Envelopper une liste d'annonces (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

Correction de la hauteur de la zone d'affichage de la barre d'annonce (35px) , chaque information d'annonce (li) La hauteur doit également être cette hauteur (je suis paresseux ici et j'utilise la hauteur de la ligne), et cette valeur sera utilisée dans le js plus tard.

 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

fonction d'encapsulation noticeUp.js

Utilisez la méthode jquery animate pour modifier la valeur marginTop de la liste ul en obtenir l'effet de défilement ;

Points de connaissance :

1. La fonction de rappel d'animation est la fonction à exécuter après l'exécution de la fonction d'animation.

2. Méthode appendTo()

Insère le contenu spécifié à la fin de l'élément sélectionné (toujours à l'intérieur).

Remarque : Le contenu spécifié correspond à certains éléments de la page actuelle, puis ces éléments disparaîtront de leurs positions d'origine. En bref, cela équivaut à une opération de déplacement et non à une opération de copie.

/*
* 参数说明
* 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. Appel de la fonction d'encapsulation

Introduisez d'abord la bibliothèque jQuery et son propre plug-in d'encapsulation

Utilisez le timer setInterval pour contrôler les informations d'annonce L'intervalle de temps affiché, dans cet exemple, est de 2000 millisecondes

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment utiliser JS pour réaliser le mouvement de trajectoire parabolique d'une petite balle

Comment implémenter une version web de la calculatrice en JS

Comment supprimer le signe # de l'URL dans Angular2 (tutoriel détaillé)

Utilisation des classes, constructeurs, et fonctions d'usine dans la méthode Javascript

Comment utiliser la bibliothèque de composants mobiles dans Vue.js (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!