JQuery を使用して Web 標準に準拠した QQ ポップアップ メッセージを作成する_jquery

ここで言うポップアップメッセージとは、Webページの右下隅にあるフレームのようなものを指しており、ここではjQueryのカスタムアニメーションを使用しており、その形状のような感じです。 Flash でのグラデーション アニメーションは、最初と最後の 2 つのキー フレームが定義されていれば、jQuery のヘルプ ドキュメントを確認するために、途中のアニメーション処理が自動的に完了します。 >

基本的な考え方は次のとおりです: 最初のポップアップ メッセージ ボックスは実際には div レイヤーであり、ページが読み込まれた後、div レイヤーを右下に配置する必要があります。 CSS を使用してページの隅を非表示にし、ページ上のボタンをクリックすると、アニメーション機能がトリガーされ、div レイヤーが下から上に上昇し始めます。 、上昇プロセス中に透明度のグラデーションがあり、その後、レイヤー内に閉じるボタンがあり、クリックすると、別のアニメーション関数がトリガーされ、divレイヤーが下がります。正式にコードの作成を開始します。test.html のソース コードは次のとおりです。

コードをコピーします コードは次のとおりです:

 

 
 
 
 
 
 

 
 

 

 
 

 

 

 

 
新規利用户注册 
关闭 

 
 

上記のコードはテストされており、動作しますが、複数のブラウザーでテストすると、IE6、IE7、IE8B2、OPERA、および CHROME ブラウザーで効果が同じであることがわかります。 Firefox では、アニメーションは下から上にあるはずですが、なぜこのようになっていますか?
私自身で検証した後、先生の助けを借りて、問題はついに解決されました:

この問題の鍵は、Firefox がページのルート要素として html を使用するのに対し、IE はルート要素として body を使用することです。本文の高さを 1800 ピクセルに設定しましたが、Firefox では html 要素の高さは 0 のままであるため、div#pop は実際には上部から始まります。

変更方法は非常に簡単で、CSS 設定を追加するだけです:

html{
高さ:100%
}

このように、最初は HTML の高さがブラウザ ウィンドウを埋め尽くし、ポップは下部に移動します。効果は IE とまったく同じです。

したがって、JS を実行する場合、CSS は非常に重要な基礎となるため、CSS を明確に理解する必要があります。

次は最終的なソース コードです:

コードをコピーします コードは次のとおりです:

 

 
 
 
 
 
 

 
 

 

 
 

 

 

 

 
新規利用户注册 
关闭