この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 効果: 実装コード: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <タイトル></タイトル> <スタイル> *{ マージン:0; パディング:0; } ul、li{ リストスタイル:なし; } 。箱{ 幅:1200ピクセル; 高さ:260px; マージン:50px 自動 0; オーバーフロー: 非表示; } 。リスト{ 幅:2000ピクセル; 高さ:260px; } .list>li{ 幅:200px; 高さ:260px; フロート:左; 背景画像:url(images/1.jpg); 背景の位置:center 中央; 背景繰り返し:繰り返しなし; } .list>li:n番目の子(2){ 背景画像:url(images/2.jpg); } .list>li:n番目の子(3){ 背景画像:url(images/3.jpg); } .list>li:n番目の子(4){ 背景画像:url(images/4.jpg); } .list>li:n番目の子(5){ 背景画像:url(images/5.jpg); } .list>li:n番目の子(6){ 背景画像:url(images/6.jpg); } </スタイル> </head> <本文> <div class="box"> <ul class="リスト"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="js/startmove.js"></script> <スクリプト> var oLis = document.getElementsByClassName("list")[0].children; for(var i = 0; i < oLis.length; i++){ oLis[i].onmouseover = 関数(){ for(var j = 0; j < oLis.length; j++){ 開始移動(oLis[j],{ 幅:160 },50) } startMove(これ、{ 幅:400 },50) } oLis[i].onmouseout = 関数(){ for(var j = 0; j < oLis.length; j++){ 開始移動(oLis[j],{ 幅:200 },10) } } } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Tomcat と WebLogic で純粋な HTML ファイルを展開するプロセスの分析
1. 事前準備 (windows7+mysql-8.0.18-winx64) 1. ダウンロードアド...
1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...
関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...
1. HTML 画像 <img> 1. <img> タグとその src 属性...
社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...
mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル(syslogs)があ...
フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を...
目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...
この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...
目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...
Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...
ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/pn...
目次1. プロトタイプ(明示的なプロトタイプ) 2. __proto__ (暗黙のプロトタイプ) 3...