シンプルなアコーディオン効果を実現する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 ファイルを展開するプロセスの分析
推薦する
Docker-compose インストール db2 データベース操作
db2 データベースをホストマシンに直接インストールするのは面倒で、ユーザーや権限を巻き込むのも不便...
vueプロジェクトのマルチ環境設定(.env)の実装
目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...
MYSQLデータベーステーブル構造の最適化方法の詳細な説明
この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...
MySQL Workbenchのダウンロードと使用方法のチュートリアルの詳細な説明
1. MySQL WorkbenchをダウンロードするWorkbench は、MySQL のグラフィ...
CentOS 8 システム FTP サーバーのインストールとパッシブ モードの設定の詳細なチュートリアル
目次1. 基本を理解する2. システム環境を確認する3. ftpコマンドをインストールする[オプショ...
高速でクールな揺れアニメーション効果を実現するCSS
1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...
MySQL で左結合を使用して where 条件を追加する問題の詳細な分析
現在の需要:グループとファクターの 2 つのテーブルがあります。1 つのグループは複数のファクターに...
Uniappがスライディングスコアリング効果を実現
この記事では、スライディングスコアリングを実装するためのuniappの具体的なコードを参考までに共有...
Windows Server 2016 に MySQL 5.7.19 の解凍バージョンをインストールするための詳細なチュートリアル
MySQL 5.7.19 winx64 解凍版のインストールチュートリアルを収録しています。具体的な...
vue.config.js パッケージ最適化構成
Baiduの情報は多様すぎて目が回ります。心配しないでください。私はあなたのためにそれを体験しました...
ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード
前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...
フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法
問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...
CentOS 8にdockerをインストールする最も詳細な方法
CentOS 8にDockerをインストールする公式ドキュメント: https://docs.doc...
Centos7 環境でソースコードから mysql5.7.16 をインストールする方法の詳細な説明
この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...
Vue の 4 つのカスタム命令の説明と使用例
4つの実用的なVueカスタム指示1. Vドラッグ要件: マウスドラッグ要素アイデア:要素のオフセット...