Comment utiliser JavaScript pour obtenir l'effet de défilement gauche et droit des polices-Questions et réponses frontales-php.cn

Comment utiliser JavaScript pour obtenir l'effet de défilement gauche et droit des polices

PHPz

Libérer： 2023-04-06 13:39:11

original

2088 Les gens l'ont consulté

Avec le développement continu de la société, la technologie de développement front-end devient de plus en plus mature. Parmi eux, JavaScript, en tant que l'un des langages de développement front-end Web les plus importants, présente une évolutivité et une opérabilité riches. Dans le développement réel, nous pouvons utiliser JavaScript pour obtenir divers effets dynamiques, tels que des effets de défilement gauche et droit des polices. Cet article présentera en détail comment utiliser JavaScript pour obtenir l'effet de défilement gauche et droit des polices.

1. Structure HTML

Tout d'abord, nous devons créer un conteneur en HTML pour afficher la police que nous voulons faire défiler. La structure html est la suivante :

<div id="scrollBox">
  <span id="scrollText">这是一段要滚动的文本This is a roll text.</span>
</div>

Copier après la connexion

Dans cette structure, nous utilisons deux éléments : le conteneur div et le texte span. Parmi eux, le conteneur div est utilisé pour limiter la plage de défilement du texte, et le texte span est le contenu du texte à faire défiler. div容器和span文本。其中，div容器用于限定文本的滚动范围，span文本则是要进行滚动的文本内容。

二、CSS样式

接下来，我们需要使用CSS样式来对上述html结构进行修饰，使其具有滚动效果。CSS样式如下：

#scrollBox {
  width: 200px; /* 容器宽度 */
  height: 30px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  border: 1px solid #ddd; /* 容器边框 */
}
#scrollText {
  display: inline-block; /* 文本块级元素转为内联块级 */
  white-space: nowrap; /* 不允许文本换行 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-right: 20px; /* 右侧空隙，用于控制滚动速度 */
  animation: textScroll 10s linear infinite; /* 文本滚动动画 */
}
@keyframes textScroll {
  0% { transform: translateX(0); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 最终状态 */
}

Copier après la connexion

我们使用了overflow: hidden属性来隐藏超出容器范围的内容，如此一来，我们就可以将要滚动的文本内容全部放到容器中。同时，我们使用white-space: nowrap属性来防止文本内容发生换行。margin-right属性用于控制滚动速度，数值越大滚动越慢，反之亦然。

最关键的是，我们使用了CSS3中的animation属性来设置文本滚动动画。@keyframes关键字用来声明动画的关键帧，即滚动效果的始末状态。我们在textScroll动画中，设置了初始状态为0%，最终状态为-100%，即文本滚出容器。

三、JavaScript交互

通过以上CSS样式设置，我们已经完成了滚动效果的布局，但实际上，滚动效果是属于浏览器的渲染效果，并非JavaScript直接实现。为了控制这个滚动效果，我们还需要一定程度的JavaScript交互。接下来，我们将通过JavaScript来实现文本滚动的启停。

var textEle = document.getElementById('scrollText'); // 获取文本元素
var textAnimation = textEle.style.animation; // 获取文本动画
textEle.style.animation = 'none'; // 停止文本滚动
window.setTimeout(function() {
  textEle.style.animation = textAnimation; // 恢复文本滚动
}, 0);

Copier après la connexion

我们使用document.getElementById方法来获取要进行滚动的文本元素，通过获取文本元素的animation属性来获取文本动画。然后，通过设置该元素的animation属性为none，即可停止文本滚动效果。最后，我们使用setTimeout方法来异步执行恢复文本滚动，即复原初始的animation

2. Style CSS

Ensuite, nous devons utiliser le style CSS pour modifier la structure HTML ci-dessus afin de lui donner un effet de défilement. Le style CSS est le suivant :

rrreee

Nous utilisons l'attribut overflow: Hidden pour masquer le contenu au-delà de la portée du conteneur. De cette façon, nous pouvons mettre tout le contenu du texte à faire défiler dans le. récipient. En même temps, nous utilisons l'attribut white-space: nowrap pour empêcher le retour à la ligne du contenu du texte. L'attribut margin-right est utilisé pour contrôler la vitesse de défilement. Plus la valeur est grande, plus le défilement est lent, et vice versa.

La chose la plus importante est que nous utilisons l'attribut animation en CSS3 pour définir l'animation de défilement du texte. Le mot clé @keyframes est utilisé pour déclarer les images clés de l'animation, c'est-à-dire le début et la fin de l'effet de défilement. Dans l'animation textScroll, nous définissons l'état initial sur 0% et l'état final sur -100%, c'est-à-dire que le texte se déroule du conteneur. 🎜🎜3. Interaction JavaScript🎜🎜Grâce aux paramètres de style CSS ci-dessus, nous avons complété la disposition de l'effet de défilement, mais en fait, l'effet de défilement est un effet de rendu du navigateur et n'est pas directement implémenté par JavaScript. Afin de contrôler cet effet de défilement, nous avons également besoin d'un certain degré d'interaction JavaScript. Ensuite, nous utiliserons JavaScript pour démarrer et arrêter le défilement du texte. 🎜rrreee🎜Nous utilisons la méthode document.getElementById pour faire défiler l'élément de texte et obtenir l'animation du texte en obtenant l'attribut animation de l'élément de texte. Ensuite, vous pouvez arrêter l'effet de défilement du texte en définissant l'attribut animation de l'élément sur aucun. Enfin, nous utilisons la méthode setTimeout pour restaurer de manière asynchrone le défilement du texte, c'est-à-dire restaurer les paramètres animation initiaux. 🎜🎜Grâce à l'interaction JavaScript ci-dessus, nous avons terminé la mise en œuvre de l'effet de défilement de texte. 🎜🎜4. Résumé🎜🎜Jusqu'à présent, nous avons implémenté avec succès la méthode JavaScript pour obtenir l'effet de défilement gauche et droit des polices. L'effet de défilement du texte peut être défini via les styles CSS, et le début et l'arrêt du défilement du texte peuvent être contrôlés via l'interaction JavaScript, qui a une certaine praticité et valeur de référence. J'espère que cet article pourra être utile aux développeurs qui débutent avec JavaScript et qui continueront à soutenir la croissance de la technologie de développement front-end. 🎜

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!