Maison > Article > interface Web > JS implémente le code d'effets spéciaux de la barre d'état pour que le texte apparaisse dans les deux sens_javascript skills

JS implémente le code d'effets spéciaux de la barre d'état pour que le texte apparaisse dans les deux sens_javascript skills

WBOYoriginal: 2016-05-16 15:34:181251parcourir

L'exemple de cet article décrit l'implémentation JS du code d'effets spéciaux de la barre d'état pour que le texte apparaisse dans les deux sens. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Lorsque vous exécutez cet effet de barre d'état où le texte apparaît d'avant en arrière, veuillez faire attention à la barre d'état dans le coin inférieur gauche de la page. Il semble que l’effet ne soit pas visible dans les versions IE8 et supérieures. Alors comment y parvenir ? Utiliser principalement des fonctions pour afficher des messages, prendre la chaîne actuelle à afficher en fonction de la valeur du lieu, préparer la fermeture de l'affichage après 300 millisecondes, en ajouter un au compteur de longueur de chaîne requis pour préparer l'affichage suivant en même temps ; en utilisant des fonctions pour masquer le message, prenez une chaîne d'une certaine longueur sur le côté droit du message et définissez le délai d'effacement du caractère suivant.

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-scroll-show-codes/

Le code spécifique est le suivant :

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 欢迎光临脚本之家，请多多提出你的建议!!! "; //这里可自定义显示内容
var place=1;
function scrollIn() { //这个函数用来显示消息
window.status=Message.substring(0, place); //根据place的值取当前需显示的字符串
if (place >= Message.length) { //如果全部信息已经显示完毕
place=1; //则将place重置
window.setTimeout("scrollOut()",300); //准备在300毫秒后收起显示
} else { //否则(信息还没有显示完)
place++; //将需取的字符串长度计数器加一
window.setTimeout("scrollIn()",50); //准备下一次显示
  } 
}
function scrollOut() { //这个函数用来消隐消息
window.status=Message.substring(place, Message.length); //取Message右边的一定长度的字符串
if (place >= Message.length) { //如果已经无字符可取(信息已经完全消隐)
place=1; //则初始化place
window.setTimeout("scrollIn()", 100); //设定下一次操作是显示信息
} else { //否则(信息还没有消隐完毕)
place++; //计数器加一
window.setTimeout("scrollOut()", 50); //设定消隐下一个字符的延时
  }
}
// End -->
</SCRIPT>
<title>来回出现文字的状态栏特效</title>
</head>
<body onLoad="scrollIn()">
<b>请注意页面左下角的状态栏</b>
</body>

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

Déclaration：

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

Article précédent：jquery implémente le code d'effet de défilement fluide de la page Web_jqueryArticle suivant：jquery implémente le code d'effet de défilement fluide de la page Web_jquery

Articles Liés

Voir plus