シンプルなアコーディオン効果を実現する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 ファイルを展開するプロセスの分析
推薦する
MySQL 5.7.21 解凍版インストール Navicat データベース操作ツールインストール
MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...
vue-cli で stimulsoft.reports.js を使用する詳細なチュートリアル
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
React Router V6 のアップデート
目次ReactRouterV6 の変更1. <Switch> が <Routes&...
MySQLトランザクションを実行するための構文とプロセスの詳細な説明
概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
Linux ネットワーク システムの紹介
目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...
WIN10 に複数のデータベースがインストールされている場合にコンピュータの速度低下を防ぐ方法
必要なときにサービスを有効にし、必要がないときは無効にします。データベース サービスを管理する方法:...
Mysql SQL ステートメントのコメント
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...
JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます
目次1. 操作要素1.1. 要素コンテンツの変更1.2. innerText と innerHtml...
Mysql5.7 で中国語の文字化けの問題を解決する
MySQL 5.7 を使用すると、Web ターミナル経由でデータベースに中国語の文字を書き込むと文字...
divは、自動入力スタイルをブロックする入力ボックスとして入力を使用せずにコンテンツを入力できます。
今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...
HTML における if 判断の使用
Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...
すべてまたは逆の選択機能を実現するJavaScript
この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...
仮想マシンのLinux初心者がIPを設定し、ネットワークを再起動する
仮想マシンを初めて使用する方や、仮想マシンに Linux をインストールしたばかりの方は、システムが...
MySQLデータベースのトランザクションとロックの詳細な分析
目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....
MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用
時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...