ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルによって生成される Web ページの横にあるポップアップ ボックスのアイデアと実装コード
javascript_javascript スキルによって生成される Web ページの横にあるポップアップ ボックスのアイデアと実装コード
- WBOYオリジナル
- 2016-05-16 16:47:291751ブラウズ
明日はまとめの時間ですが、あまり学んでいないような気がします。まずは今日分析する問題を見てみましょう。
次のような写真は誰もがよく知っています: 
————————————
今日は、このポップアップボックスの特徴を紹介します。
* ページの境界線に常に付加されます。
* ページが上がっても位置は変わりません。落ちる
* マウスが通過すると詳細情報がポップアップ表示され、離れると元の状態に戻ります
このように、使用できる機能は大まかにいくつか考えられます。 : 位置の絶対位置決め; マウスが通過した後に離れる; これらは間違いなく使用されますが、これら以外に何が使用され、どのように実装されますか?
1. すべてのディスプレイのインターフェース状態を実現するには
まず HTML コードを記述します
コードをコピーします コードは次のとおりです。
🎜>
2. 詳細部分を非表示にして、プロンプト部分をリークします
これを変更するには、div の幅である shareLeft、right=-300px の正しい値を変更するだけです。 >
3. js を使用してポップアップ効果を実現します
このタイマー効果を使用するのはこれが初めてではなく、以前にタイプライター効果を js で実装したときに使用しました。タイミング オブジェクトを変更しました
コードをコピー
コードをコピーします コードは次のとおりです。 🎜> *{マージン: 0;パディング: 0;} #shareLeft{位置: 固定;背景色: 黄色;上: 50px;幅: 300px; 高さ: 600px;右: 0px;}
#mainMsg{color: #fff;position: 絶対;cursor: pointer;text-align: center;background-color: red;top: 60px;幅: 100px;高さ: 400px;パディング: 20px 0 0 10px;margin-left: -100px;border-radius:50px 0 0 50px; } .list{float: right;background-color: #fff ;width: 280px;height: 580px ;margin: 10px 10px 10px 10px;}
ここで重要なポイントを分析してみましょう: a. この固定位置は非常に優れています。 ; b. 右: 0px、これは具体的です アプリケーションについては後で詳しく説明しますが、これも重要です; 3. #mainMsg の左マージン: -100px、ここも非常に重要ですので見てみましょう。エフェクトで
はは、これが今年最大のエフェクトです。ポップアップ ボックスにいたずらをしましょう。js を使用したポップアップ エフェクトについて引き続き話しましょう。ここで重要なポイントを分析してみましょう: a. この固定位置は非常に優れています。 ; b. 右: 0px、これは具体的です アプリケーションについては後で詳しく説明しますが、これも重要です; 3. #mainMsg の左マージン: -100px、ここも非常に重要ですので見てみましょう。エフェクトで
2. 詳細部分を非表示にして、プロンプト部分をリークします
これを変更するには、div の幅である shareLeft、right=-300px の正しい値を変更するだけです。 >
3. js を使用してポップアップ効果を実現します
このタイマー効果を使用するのはこれが初めてではなく、以前にタイプライター効果を js で実装したときに使用しました。タイミング オブジェクトを変更しました
コードをコピー
コードは次のとおりです: <スパン スタイル="font-size:12px;">を紹介します。ここでは特別な記事でこのように使用してみましょう。
効果がわかったらお話しますので、あなたも試してみてください。
効果がわかったらお話しますので、あなたも試してみてください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。