ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用して文字入力効果を実現する特殊効果例を紹介します。
JavaScriptを使用して文字入力効果を実現する特殊効果例を紹介します。
- 伊谢尔伦オリジナル
- 2017-04-29 14:53:081757ブラウズ
この章では、Web 閲覧時によく見られるタイピング効果を中心に紹介します。このセクションのコードでは、主に onMousedown イベントと、event.button 属性を使用します。主な機能と使用方法は次のとおりです。
• setTimeout メソッドは、実行されると、ロード後に指定された時間だけ遅延させた後、式を 1 回だけ実行します。
• charAt メソッドは、指定されたインデックス位置にある文字値を返します。文字列の最初の文字のインデックスは 0、2 番目の文字のインデックスは 1 などとなります。有効範囲外のインデックス値は空の文字列を返します。
<html>
<head>
<title>打字效果的文字特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="Javascript">
var layers = document.layers;
var style = document.all;
var both = layers || style;
var idme = 908601;
if(layers) //如果不是ie浏览器
{
layerRef = 'document.layers';
styleRef = '';
}
if(style) //如果是ie浏览器
{
layerRef = 'document.all';
styleRef = '.style';
}
function writeOnText(obj, str) { //函数在页面上打印字符串
if(layers) {
with(document[obj]) {
document.open();
document.write(str); //write方法打印字符串
document.close();
}
}
if(style) eval(obj+'.innerHTML = str'); //使用innerHTML属性显示字符串
}
var dispStr = new Array("phpcn"); //字符串数组
var overMe = 0;
function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果
{
var tmp0 = tmp1 = '', skip = 100;
if(both && idx <= str.length) {
if(str.charAt(idx) == '<') {
while(str.charAt(idx) != '>') idx++;
idx++;
}
if(str.charAt(idx) == '&' && str.charAt(idx+1) != '') {
while(str.charAt(idx) != ';') idx++;
idx++;
}
tmp0 = str.slice(0, idx);
tmp1 = str.charAt(idx++);
if(overMe==0 && plysnd==1) {
if(navigator.plugins[0]) {
if(navigator.plugins["LiveAudio"][0].type == "audio/basic" && navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)", 100);
}
} else if(document.all) {
ding.Stop();
setTimeout("ding.Run()", 100);
}
overMe = 1;
} else {
overMe = 0;
}
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");
//调用writeOnText函数将字符显示在网页上
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay);
}
}
function init()
{
txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0); //调用txtTyper函数开始打字
}
</script>
</head>
<body onLoad="init();">
<center>
<h1>打字效果的文字特效</h1>
<hr />
<div class="ttll" id="tt10"></div>
</center>
</body>
</html> プログラムを実行すると、ページにプロンプトメッセージが表示され、その後、文字が 1 つずつ表示されます。このように一文字ずつ文字が表示されたら、すべての印刷が完了するまで待って印刷を停止します。
ソースプログラムの解釈
(1)プログラムは、後で呼び出しやすいように、最初にIDがttl0のレイヤーを作成します。このレイヤーは、印刷されたテキストを表示するために使用されます。
(2) プログラムは 6c04bd5ca3fcae76e30b72ad730ca86d 要素に onLoad イベントを追加します。ページ全体が読み込まれると、イベントがトリガーされ、イベントを処理するために init() イベント処理関数が呼び出されます。
(3) 関数txtTyper()内で、charAtメソッドを使用して文字列内の特定の文字を取得します。 if 条件文を使用して、文字が最後に達するかどうかを判断します。条件を満たすとページに印刷されます。
(4) if ステートメントでは、より複雑な操作を完了するために、任意の正当な Javascript ステートメントを使用することもできます。
以上がJavaScriptを使用して文字入力効果を実現する特殊効果例を紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。