この記事では、画像の一時停止を実現するためのjQueryプラグインの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 非常に一般的な効果は、クリックすると画像が浮かんで表示されるというものです。 効果は以下のとおりですコードセクション<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>絵を浮かべる</title> <script src="js/jquery-3.4.1.min.js"></script> <スタイル> * { マージン: 0px; パディング: 0px; ユーザー選択: なし; } ul { 左マージン: 20px; } ul li{ 幅: 200ピクセル; } 画像 { 幅: 100%; } 。フロート{ 位置: 固定; 上位: 10% 左: 10%; 幅: 80%; リストスタイル: なし; zインデックス: 99; } .float::before{ コンテンツ: ''; 位置: 固定; 幅: 100%; 高さ: 100%; 左: 0; 上: 0; zインデックス: 98; } </スタイル> </head> <本文> <ul> <li class="li"><img src="img/1.png" /></li> <li class="li"><img src="img/2.png" /></li> <li class="li"><img src="img/3.png" /></li> <li class="li"><img src="img/4.png" /></li> </ul> </本文> </html> <スクリプト> $(".li").click(関数() { $(this).toggleClass('float') }) </スクリプト> アイデアの説明それは、ある状態から別の状態へと変化し、クラスを与えたり取り除いたりすることです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linuxのテキスト処理コマンドsortの詳細な説明
>>: Centos7.5 構成 Java 環境のインストール Tomcat の説明
コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...
私はプロジェクトの展開にAlibaba Cloudから購入したCentOSを使用しています。最近、プ...
この記事では、MySQL ユーザー管理操作について説明します。ご参考までに、詳細は以下の通りです。こ...
目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...
位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...
目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...
1. まずパゴダを設置するインストール要件: Python バージョン: 2.6/2.7 (Pago...
この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...
まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...
目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...
序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...
新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...
目次1. プロセス2. コアアーキテクチャ2.1 サーバー層の基本コンポーネントの紹介3. ステート...
最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...