シンプルなアコーディオン効果を実現する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 ファイルを展開するプロセスの分析
推薦する
Vue ユニットテストに関する予備調査
目次序文なぜユニットテストを導入するのですか?ユニットテストの概要テスト開発パターン1. テスト駆動...
WeChatアプレットがテキストスクロールを実装
この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...
LinuxでPythonの組み込みバージョンを削除する手順の詳細な説明
大きな落とし穴、Linuxシステムに付属するPythonのバージョンを簡単に削除しないでください1....
Nginx ローカル ディレクトリ マッピング実装コード例
他のデバイスの画像をローカルディレクトリにマウントするなど、サーバー上の静的リソースにアクセスする必...
Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。
Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...
node_modulesを削除して再インストールする方法
目次ステップ1: プロジェクトをインストールするディレクトリにnode_modulesをインストール...
Dockerで作成したコンテナを削除する方法
Dockerで作成したコンテナを削除する方法1. まず、docker -s -aコマンドを使用してす...
HTMLフォームタグチュートリアル（1）：
フォームは、動的な Web ページを実装するための主要な外部フォームです。フォームとフォーム フィー...
CentOS で LibreOffice を使用してドキュメント形式を変換する方法
プロジェクト要件では、アップロードされたドキュメントの前処理が必要です。ユーザーが doc 形式でド...
MySQLカバーインデックスの詳しい説明
コンセプトインデックスにクエリ要件を満たすすべてのデータが含まれている場合、それはカバーリング イン...
MySQLでクエリキャッシュを実行する方法と失敗を解決する方法
関数を使用する前にパラメータのプロパティを理解して、関数の使い方をより深く理解する必要があることは誰...
mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません
2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...
WeChatミニプログラムでの仮想リストの実装例
目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...
無料のパブリック STUN サーバー
無料のパブリック STUN サーバーSIP 端末がプライベート IP アドレスを使用する場合、スタン...
RedHat 6.5 に MySQL 5.7 をインストールするための詳細なチュートリアル
RedHat6.5インストールMySQL5.7チュートリアル共有、参考までに、具体的な内容は次のとお...