ホームページ > 記事 > ウェブフロントエンド > js および css_javascript スキルを使用して自動的に非表示にできるフローティング ボックスを作成する
js および css_javascript スキルを使用して自動的に非表示にできるフローティング ボックスを作成する
- WBOYオリジナル
- 2016-05-16 16:56:471175ブラウズ
今日は、js と css を使用して、自動的に非表示にできるフローティング ボックスを作成する小さな例を書きます。 CSS はスタイルの制御に使用され、js は表示と非表示の制御に使用されます。表示と非表示は通常、次の 2 つの方法で実装されます。 1. js を使用して表示属性を制御します。 2. js を使用してサイズを制御します。
今日説明するのは、サイズを制御して要素を表示または非表示にすることです。マウスが移動したときに、その要素の移動イベントと移動イベントを登録します。オブジェクト範囲を指定するには、その幅を 1 に設定します。マウスを再度移動すると、オブジェクトがその中に移動し、その幅が復元されます。とても簡単なので見てみましょう！
非表示状態: 
左側の細い線は、非表示後のフローティング ボックスです。
表示状態: 
左側のフローティングボックス上をマウスでスライドすると、フローティングボックスが再度表示されます。
CSS スタイル:
コードをコピー コードは次のとおりです:
コードをコピーします。
コードは次のとおりです。
学生情報
学生 ID:
名前:
大学:
フローティング ボックスを使用して情報を表示する必要がある場合は、それをポイントすると表示され、不要なときにマウスを移動すると表示されたままになるので非常に便利です。それ自体の。とてもシンプルですが、ユーザーエクスペリエンスが良く、ユーザーが快適に過ごせるものづくりを常に追求しています。名前:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。