シンプルなアコーディオン効果を実現する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
この記事では、ウェブページのスネークゲームを実装するためのJavaScriptの具体的なコードを参考...
JavaScriptはすべての選択と選択解除の操作を実装します
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...
ROS で Turtlebot3 移動ロボットを制御するための基本的なチュートリアル
中国語チュートリアルhttps://www.ncnynl.com/category/turtlebo...
Docker で Redis センチネル モードを構成する方法 (複数のサーバー上)
目次序文状態DockerをインストールするRedisのマスターノードとスレーブノードを構成する序文以...
JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明
目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...
MySQLリモートアクセスの設定方法をステップバイステップで説明します
序文MySQL データベースを使用する場合、クライアントはデータベース サーバーにリクエストを送信す...
CSS3で実装された3Dトンネル効果
達成された効果実装コードhtml <div class="scene"&g...
フォームデータを取得するための Node.js メソッドの 3 つの例
序文Nodejs はサーバーサイド言語です。開発中、登録やログインなどでは、判断のためにフォームを通...
JavaScriptのモジュール性を理解する方法
目次1. ブラウザのサポート2.エクスポートモジュールのエクスポート3. モジュールをインポートする...
Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...
js で下線とキャメルケースの変換を実装する (複数の方法)
目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...
空のパスがページのパフォーマンスに与える影響に対する解決策
数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマ...
Angular の 12 の典型的な問題について簡単に説明します
目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...
Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所...
HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...