シンプルなアコーディオン効果を実現するjs
|
この記事では、アコーディオン効果を実現するための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 ファイルを展開するプロセスの分析
推薦する
Windows 7 での MySQL 8.0.18 の導入とインストールのチュートリアル
1. 事前準備 (windows7+mysql-8.0.18-winx64) 1. ダウンロードアド...
Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。
1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...
MySQLでクエリキャッシュを実行する方法と失敗を解決する方法
関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...
HTML 背景画像と背景色_PowerNode Java アカデミー
1. HTML 画像 <img> 1. <img> タグとその src 属性...
3つのDocker Nginxログの処理の詳細な説明
社内の同僚は Nginx ログの標準出力、つまりコンソール経由の処理を必要としているため、まずログを...
mysql バッチで大量のデータを削除する
mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル（syslogs）があ...
両側にCSS固定レイアウト、中央に適応レイアウトを実装
フローティング、フローティング埋め込み div、配置、フレックスという 4 つの一般的な方法と原則を...
Echarts バー水平棒グラフのサンプルコード
目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...
ウェブページの右側に固定されたフローティングレイヤーの実装コード
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
MySQL の複合インデックスはどのように機能しますか?
目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...
フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。
この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...
高度なクローラー - JS 自動レンダリングのための Scrapy_splash コンポーネントの使用
目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...
Dockerアーキテクチャ入門
Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...
srcまたはcss背景画像のurl値はbase64でエンコードされたコードです
ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/pn...
JavaScript プロトタイプとプロトタイプチェーンの詳細
目次1. プロトタイプ（明示的なプロトタイプ） 2. __proto__ (暗黙のプロトタイプ) 3...