シンプルなアコーディオン効果を実現する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 ファイルを展開するプロセスの分析
推薦する
シンプルなカルーセル効果を実現するJavaScript
カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...
Dockerはプライベートライブラリイメージを完全に削除します
まず、インターネット上の一般的な慣行を見てみましょうデフォルトでは、プライベート ライブラリはイメー...
Ubuntu仮想マシンでシリアル通信にcutecomを使用する方法
Ubuntu仮想マシンでのシリアル通信にcutecomを使用する1. cutecomをインストールす...
MySQL 5.1 のパスワードを変更し、MySQL データベースにリモートでログインする方法
mysql ユーザーを作成し、承認します。形式: 「ユーザー パスワード」で識別されるユーザー@ログ...
ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有
プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...
jsBridgeの動作メカニズムを1つの記事で学ぶ
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...
CocosCreatorを使ってシューティングゲームを作る方法
製造手順を分析します。 1. リソースを準備してシーンを構築するオンラインでリソースを探すか、私のリ...
W3C チュートリアル (5): W3C XML アクティビティ
XML は、データを記述、保存、送信、交換するために設計されています。 XML 1.0 は XML ...
CSS3 カテゴリメニュー効果
CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...
Centos7.9 で独立したメール サーバーを構築するための詳細な手順
目次序文1. イントラネットDNS AレコードとMXレコードを構成する2. メールサーバの初期化設定...
JavaScript進捗管理の詳しい説明
目次序文質問原理テスト序文プログラムを作成するときに、読み込みの進行状況やアップロードの進行状況など...
JSコードコンパイラMonacoの使い方
序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...
MySQL 8.0.11 MSI バージョンのインストールと構成のグラフィック チュートリアル
この記事では、MySQL 8.0.11 MSIバージョンのインストールと設定のチュートリアルを参考ま...
Reactは二次連結（左右連結）を実現する
この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...
MySQL での SQL モードの表示と設定の詳細な説明
MySQL での SQL モードの表示と設定MySQL はさまざまなモードで実行でき、さまざまなシナ...