今日は、js と css を使用して、自動的に非表示にできるフローティング ボックスを作成する小さな例を書きます。 CSS はスタイルの制御に使用され、js は表示と非表示の制御に使用されます。表示と非表示は通常、次の 2 つの方法で実装されます。 1. js を使用して表示属性を制御します。 2. js を使用してサイズを制御します。
今日説明するのは、要素のサイズを制御することで要素の表示と非表示を実現することです。マウスがオブジェクトの範囲から出たり入ったりするイベントを登録し、その幅を に設定します。 1. マウスが再びオブジェクト内に移動すると、その幅が 1 に設定されます。幅が復元されます。とても簡単なので見てみましょう！
非表示の状態:
左側の細い線は、非表示にした後のフローティングフレームです。
表示ステータス:
左側のフローティング ボックス上でマウスをスライドすると、フローティング ボックスが再び表示されます。
CSS スタイル:
次のようにコードをコピーします。
<スタイル>
* { font-size:12px; font-family:Verdana、宋体 }
html、ボディ{マージン:0px;オーバーフロー:非表示}
.b { マージン:0px; オーバーフロー:0px;
.line0 { 行の高さ:20px; パディング:0px 15px;
.line1 { 行の高さ:18px; パディング:0px 10px;
.w { 位置: 絶対; 上部: 10px; 高さ: 281 ピクセル; -moz-user-select: なし;
.t {行の高さ:20px;幅:160px;背景の色:白;テキストの配置:中心; }
.winBody { 高さ:270px; オーバーフロー-y:自動; 背景色:10px;
</スタイル>
JSコード:
次のようにコードをコピーします。
<script type="text/javascript">
関数 myshow(){
//document.getElementById('mydiv').style.display = "none";
document.getElementById('mydiv').style.width = "160px";
} //ブロック
関数 myhide(){
//document.getElementById('mydiv').style.display = "ブロック";
document.getElementById('mydiv').style.width="1px";
}
//テストの場合、テスト効果を促進するためにいくつかのコンテンツをランダムに生成します。
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(new Array(20)).join(( Math.random()*1000000).toString(36)+" ")+"</div>");
新しい関数(w,b,c,d,o){
d=document;b=d.body;o=b.childNodes;c="クラス名";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(window.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</script>
HTMLコード:
次のようにコードをコピーします。
<本文>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>学生情報</div>
<div>
学生ID: <label>0123456789 </label><br><br>
名前: <label>シャオ・ミン</label><br><br>
大学: <label>ソフトウェア大学</label><br><br>
専攻: <label>ソフトウェア エンジニアリング</label><br><br>
クラス: <label>クラス 1</label><br><br>
</div>
</div>
</body>
フローティング ボックスを使用して情報を表示する必要がある場合は、それをポイントすると表示され、不要になったらマウスを移動すると自動的に表示されます。 。とてもシンプルですが、ユーザーエクスペリエンスが良く、ユーザーが快適に過ごせるものづくりを常に追求しています。