週末です。明日を要約する時が来ました。私はいくつかのことを学んだように感じますが、私はあまり学んでいないように感じます。明日分析しましょう。今日分析したい問題を見てみましょう。
誰もがこの写真に精通しています：
- - - - - - - - - -
今日は分析して作成します。まず、このポップアップボックスの特性を紹介しましょう。
*常にページの境界線に添付されています
*ページが上がって落ちるにつれて位置を変更しないでください
*マウスが通り過ぎると、詳細情報がポップアップ表示され、それが去ると元の状態に戻ります。
このようにして、いくつかの可能な機能を大まかに考えることができます。投稿の絶対的な位置付け。通過するマウスの監視と方法。これらは間違いなく使用されますが、これら以外の他の用途は何ですか、そしてそれらはどのように実装されていますか？
1.表示されているすべてのインターフェイスステータスを実装します
最初にHTMLコードを記述します
コードコピーは次のとおりです。
<span style = "font-size：12px;"> <div id = "shareleft">
<div>
<p> <a href = "＃"> tip </a> </p>
</div>
<p id = "mainmsg" onmouseover = "showtip（）">
に共有します
</p>
</div> </span>
次に、CSSスタイルのエンコーディング
コードコピーは次のとおりです。
<span style = "font-size：12px;">*{margin：0; padding：0;}
#shareleft {position：fixed; background-color：yellow; top：50px; width：300px; height：600px;右：0px;}
#mainmsg {color：#fff; position：absolute; cursor：pointer; text-align：center; background-color：red; top：60px; width; width; width：100px; height：400px; padding：20px 0 0 10px; margin-left：-100px; border-radius：50px 0 0 50px; }
.list {float：right; background-color：#fff; width：280px; height：580px;マージン：10px 10px 10px 10px;} </span>
ここで重要なポイントを分析しましょう。投稿：固定位置は非常に良いです。 b。右：0px、これの特定のアプリケーションについては後で詳しく説明しますが、ここでも非常に重要です。 3。
ハハ、これは今年の最大のポップアップボックスです。 JSのポップアップ効果について話し続けましょう
2。詳細な部分を隠し、部品が外に漏れていることを促します
これは比較的簡単です。それを変更するには、shareleftの適切な値を変更するだけです= -300px、これはdivの幅です
3。JSポップアップ効果を達成する
このタイマーの効果を使用したのはこれが初めてではありません。 JSがタイプライター効果を実装したときに適用しました。ここでは、タイミングオブジェクトを変更しました。
コードコピーは次のとおりです。
<span style = "font-size：12px;"> <script type = "text/javascript">
varタイマー= null;
var count = 0;
var tip = function（位置、ターゲット、速度）{
ClearInterval（タイマー）;
Timer = setInterval（function（）{
if（count> position.offsetWidth）{
ClearInterval（タイマー）;
}それ以外{
position.style.right+= window.count+"px";
window.count ++;
};
}、 スピード）;
};
function showtip（）{
var position = document.getElementById（ "Shareleft"）;
tip（position、document.body.clientwidth、1000）;
};
</script> </span>
このコードで注意を払う最も重要なポイントは、OffsetWidth、.Style.Rightなどです。今のところこれについては話しません。具体的に紹介します。最初にこのように使用しましょう。意味を知ってください。
これを徹底的に理解した後、その効果は今達成されるので、あなたもそれを試すことができます。