javascript_javascript スキルによって生成される Web ページの横にあるポップアップボックスのアイデアと実装コード-jsチュートリアル-php.cn

javascript_javascript スキルによって生成される Web ページの横にあるポップアップボックスのアイデアと実装コード

WBOY

リリース： 2016-05-16 16:47:29

オリジナル

1764 人が閲覧しました

明日はまとめの時間ですが、あまり学んでいないような気がします。まずは今日分析する問題を見てみましょう。

次のような写真は誰もがよく知っています:

javascript_javascript スキルによって生成される Web ページの横にあるポップアップボックスのアイデアと実装コード ————————————

今日は、このポップアップボックスの特徴を紹介します。

* ページの境界線に常に付加されます。

* ページが上がっても位置は変わりません。落ちる

* マウスが通過すると詳細情報がポップアップ表示され、離れると元の状態に戻ります

このように、使用できる機能は大まかにいくつか考えられます。 : 位置の絶対位置決め; マウスが通過した後に離れる; これらは間違いなく使用されますが、これら以外に何が使用され、どのように実装されますか?

1. すべてのディスプレイのインターフェース状態を実現するには

まず HTML コードを記述します

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

🎜>

ヒント

div>

/span>

CSS スタイルのエンコーディング

コードをコピーしますコードは次のとおりです。 🎜> *{マージン: 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 を使用したポップアップエフェクトについて引き続き話しましょう。

2. 詳細部分を非表示にして、プロンプト部分をリークします javascript_javascript スキルによって生成される Web ページの横にあるポップアップボックスのアイデアと実装コード

javascript_javascript スキルによって生成される Web ページの横にあるポップアップボックスのアイデアと実装コード

これを変更するには、div の幅である shareLeft、right=-300px の正しい値を変更するだけです。 >
3. js を使用してポップアップ効果を実現します

このタイマー効果を使用するのはこれが初めてではなく、以前にタイプライター効果を js で実装したときに使用しました。タイミングオブジェクトを変更しました

コードをコピー

コードは次のとおりです: <スパンスタイル="font-size:12px;">を紹介します。ここでは特別な記事でこのように使用してみましょう。

効果がわかったらお話しますので、あなたも試してみてください。