Maison interface Web js tutoriel JS implémente le code d'effet pop-up du texte de la barre d'état du navigateur de droite à gauche_compétences javascript

JS implémente le code d'effet pop-up du texte de la barre d'état du navigateur de droite à gauche_compétences javascript

May 16, 2016 pm 03:34 PM
js Effet pop-up 浏览器

L'exemple de cet article décrit l'implémentation JS de l'effet pop-up de texte de la barre d'état du navigateur de droite à gauche. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le code contextuel du texte de la barre d'état apparaît ici de droite à gauche. L'effet peut être modifié en modifiant ces extraits de code dans le script :

var POSITION = 100
var DÉLAI = 4
var MESSAGE = "Voici le texte que vous souhaitez !"

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-status-bar-txt-scroll-codes/

Le code spécifique est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>状态栏文字弹出代码,从右向左弹出</TITLE>
</HEAD>
<BODY>
<script language="JavaScript"> 
<!--
function statusMessageObject(p,d) {
 this.msg = MESSAGE
 this.out = " "
 this.pos = POSITION
 this.delay = DELAY
 this.i   = 0
 this.reset = clearMessage
}
function clearMessage() {
 this.pos = POSITION
}
var POSITION = 100
var DELAY  = 4
 var MESSAGE = "状态栏文字快速的一个一个弹出!!!  " 
var scroll = new statusMessageObject()
function scroller() {
 for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
  scroll.out += " "
 }
 if (scroll.pos >= 0)
  scroll.out += scroll.msg
 else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
 window.status = scroll.out
 scroll.out = " "
 scroll.pos--
 if (scroll.pos < -(scroll.msg.length)) {
  scroll.reset()
 }
 setTimeout ('scroller()',scroll.delay)
}
function snapIn(jumpSpaces,position) {
 var msg = scroll.msg
 var out = ""
 for (var i=0; i<position; i++) 
  {out += msg.charAt(i)}
 for (i=1;i<jumpSpaces;i++) 
  {out += " "}
 out += msg.charAt(position)
 window.status = out
 if (jumpSpaces <= 1) {
  position++
  if (msg.charAt(position) == ' ') 
   {position++ }
  jumpSpaces = 100-position
 } else if (jumpSpaces > 3)
    {jumpSpaces *= .75}
 else
  {jumpSpaces--}
 if (position != msg.length) {
  var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
  scrollID = window.setTimeout(cmd,scroll.delay);
 } else {
  window.status=""
  jumpSpaces=0
  position=0
  cmd = "snapIn(" + jumpSpaces + "," + position + ")";
  scrollID = window.setTimeout(cmd,scroll.delay);
  return false 
 }
 return true
}
snapIn(100,0);
// -->
</script>
</BODY>
</HTML>

Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD
Musée à deux points: toutes les expositions et où les trouver
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment résoudre le problème de l'interface tiers renvoyant 403 dans l'environnement Node.js? Comment résoudre le problème de l'interface tiers renvoyant 403 dans l'environnement Node.js? Mar 31, 2025 pm 11:27 PM

Résolvez le problème de l'interface tiers renvoyant 403 dans l'environnement Node.js. Lorsque nous utilisons Node.js pour appeler des interfaces tierces, nous rencontrons parfois une erreur de 403 à partir de l'interface renvoyant 403 ...

Comment éviter d'être détecté par le navigateur lors de l'utilisation de Fiddler partout pour la lecture de l'homme au milieu? Comment éviter d'être détecté par le navigateur lors de l'utilisation de Fiddler partout pour la lecture de l'homme au milieu? Apr 02, 2025 am 07:15 AM

Comment éviter d'être détecté lors de l'utilisation de FiddlereVerywhere pour les lectures d'homme dans le milieu lorsque vous utilisez FiddlereVerywhere ...

Quelle est la raison de la redirection des erreurs 404 après s'être connectée au sélénium? Comment le résoudre? Quelle est la raison de la redirection des erreurs 404 après s'être connectée au sélénium? Comment le résoudre? Apr 01, 2025 pm 10:54 PM

Solution pour rediriger 404 erreurs après la connexion de la simulation Lors de l'utilisation du sélénium pour la connexion de la simulation, nous rencontrons souvent des problèmes difficiles. � ...

Comment implémenter un saut croisé pour l'autorisation de connexion du plug-in Word? Comment implémenter un saut croisé pour l'autorisation de connexion du plug-in Word? Apr 01, 2025 pm 11:27 PM

Comment implémenter un saut croisé pour l'autorisation de connexion du plug-in Word? Lorsque nous utilisons certains plugins de mots, nous rencontrons souvent ce scénario: cliquez sur la connexion dans le plugin ...

Le module de sous-processus Python ne parvient pas à exécuter la commande WMIC DataFile. Comment le résoudre? Le module de sous-processus Python ne parvient pas à exécuter la commande WMIC DataFile. Comment le résoudre? Apr 01, 2025 pm 08:48 PM

Utilisez le module de sous-processus de Python pour exécuter WMIC ...

Pourquoi la petite fenêtre est-elle devenue vide après avoir scanné le code QR sur WeChat? Comment le résoudre? Pourquoi la petite fenêtre est-elle devenue vide après avoir scanné le code QR sur WeChat? Comment le résoudre? Apr 01, 2025 pm 03:54 PM

Gérez le problème de la petite fenêtre vide après avoir scanné le code QR sur WeChat. Lorsque vous utilisez WeChat pour scanner le code QR sur WeChat, nous rencontrons souvent des problèmes inattendus. Un commun ...

Comment résoudre le problème du contenu de chargement dynamique manquant lors de l'obtention de données de page Web? Comment résoudre le problème du contenu de chargement dynamique manquant lors de l'obtention de données de page Web? Apr 01, 2025 pm 11:24 PM

Problèmes et solutions rencontrés lors de l'utilisation de la bibliothèque de requêtes pour faire craquer les données de la page Web. Lorsque vous utilisez la bibliothèque des demandes pour obtenir des données de page Web, vous rencontrez parfois le ...

Jiutian Computing Power Platform Task: La tâche informatique continuera-t-elle à s'exécuter après l'arrêt de l'ordinateur local? Jiutian Computing Power Platform Task: La tâche informatique continuera-t-elle à s'exécuter après l'arrêt de l'ordinateur local? Apr 01, 2025 pm 11:57 PM

La discussion sur l'état de la tâche après la fermeture de l'ordinateur local de la plate-forme d'alimentation informatique jiutiane. De nombreux utilisateurs rencontreront une question lors de l'utilisation de la plate-forme de puissance de l'informatique jiutienne pour la formation de l'intelligence artificielle ...

See all articles