10 lignes de code js pour obtenir un effet d'annonce de défilement de haut en bas

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 de manière très détaillée à travers l'exemple de code. Il a une certaine valeur de référence et d'apprentissage pour l'étude ou le travail de chacun. . Les amis qui en ont besoin peuvent suivre. Jetons un coup d'oeil avec l'éditeur. J'espère que cela aide tout le monde.

Exigences

Dans les projets récents, il est nécessaire d'obtenir l'effet d'affichage défilant du babillard comme suit :

Solution

1. Construire d'abord Une couche p sert de zone d'affichage des annonces, qui enveloppe une liste d'annonces (ul

CSS

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

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

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

fonction d'encapsulation noticeUp.js

Utilisez la méthode d'animation jquery pour modifier la margeTop. de la valeur ul de la liste pour obtenir l'effet de défilement ;

Points de connaissance :

1. fonction de rappel d'animation 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.

4. Appel de la fonction encapsulée

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

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

Utiliser le timing Utilisez setInterval pour contrôler l'intervalle de temps d'affichage des informations d'annonce. Dans cet exemple, il est de 2000 millisecondes

Si vous pensez que c'est bon, veuillez l'enregistrer.

Recommandations associées :

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

Explication détaillée de l'animation et des effets spéciaux jQuery

Qu'est-ce qu'un calque de masque d'effets spéciaux js

JavaScript met en œuvre la production d'effets spéciaux pour les cases sélectionnées

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!