jQueryでIE6のフェードイン・フェードアウトプロンプト機能を実装した効果例-PHPチュートリアル-php.cn

jQueryでIE6のフェードイン・フェードアウトプロンプト機能を実装した効果例

小云云

リリース： 2023-03-19 21:32:02

オリジナル

1466 人が閲覧しました

この記事では、IE6 と互換性のあるフェードインおよびフェードアウト効果の警告プロンプト機能を実装するための jQuery を主に紹介し、具体的な例に基づいて jQuery のポップアップ警告プロンプト機能の具体的な実装手順と関連する操作テクニックを分析します。必要な友達が参考になれば幸いです。

実際、アラームプロンプトに関しては、単にアラートを使用するのが最善だと思います。要点を直して、ユーザーに現在のシステムの意味を直接理解してもらいましょう。重要なのは、Alert がどんなに壊れていても、どのブラウザとも互換性がある必要があるということです。そうでないと、あなたは愚かなブラウザになってしまいます。しかし、現在ではアラートは見苦しいという意識が高まっており、「ポップアップウィンドウは怖い」という風潮もあるため、アラートの見栄えを良くする必要があります。 Javascript の透明度を制御するのは難しいという前提の下では、jQuery のシンプルなフェード効果を選択できます。 jQuery を選んだ理由は、IE6 との互換性が高いためです。

1. 基本目標

入力ボックスの文字数が中国語と英語の両方で 10 文字を超える場合。アラームがポップアップします。具体的な効果は、IETest の IE6 環境でテストに合格しました。

2. HTMLレイアウト

ここではpレイアウトを使用し、tableレイアウトは使用しません。具体的な float レイアウトについては、「p+CSS Web ページ制作レイアウトスキルの学習」を参照してください。ここでは詳しく説明しません:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>告警提示</title>
</head>
<body>
<p style="float:left;">内容：</p><p id="errMsg" style="color:#ff0000;display:none;float:left;">错误！</p>
<p style="clear:both;"></p>
<p>
<textarea onchange="errTipsAlert(this)"></textarea><br />
</p>
</body>
</html>

ログイン後にコピー

これは、皆さんも気づいていただければ幸いです。アラーム関数が複数行で渡されるテキストボックスの onchange がトリガーされると、それ自体がその関数に渡されます。同時にアラームテキストも設定されていますが、最初は非表示になっています。

同時に、最初にjqueryを導入することに注意してください。

3. jquery スクリプト

show() と Hide() を使用する「JQ を使用して最も基本的なフェードインとフェードアウト効果を記述する」とは異なり、ここで FadeTo0 を使用してフェードアウトする理由show() と Hide() にはフェードインまたはフェードアウト効果がないためです。フェードインとフェードアウトを使用するとテキストがずれてしまうため、見栄えが良くありません。

<script>
function errTipsAlert(obj){
 //obj把自己传递过来了，如果多行文本框里面的内容多于10个字
 if(obj.value.length>10){
  //那么错误提示文本errMsg就一开始在1秒之内透明度从0变成1，之后又在1秒之内透明度从1变成0，再同理变回来，从而实现淡入淡出的闪烁提示。
  $("#errMsg").fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
  //然后多行文本框的边框加粗，变红
  $(obj).css("border","2px solid #ff0000");
 }
 else{
  //否则错误提示文本errMsg就在1毫秒内透明变变成0，相当于hide()方法，但是hide()在某些情况下会发生移位。
  $("#errMsg").fadeTo(1,0);
  //恢复多行文本框的边框
  $(obj).css("border","1px solid #cccccc");
 }
}
</script>

ログイン後にコピー

複数行のテキストボックスにはアニメーションを設定しないでください。「jQuery ループアニメーションとコンポーネントサイズの取得」のように、borderwidth プロパティをアニメーション化することはできますが、このアニメーションは非常にスタックしています。したがって、これは行わない方が良いです。