画像の一時停止を実現するjQueryプラグイン

画像の一時停止を実現するjQueryプラグイン

この記事では、画像の一時停止を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery マウスホバーリンクポップアップ画像サンプルコード

<<:  Linuxのテキスト処理コマンドsortの詳細な説明

>>:  Centos7.5 構成 Java 環境のインストール Tomcat の説明

推薦する

フォームファイル選択ボックスのスタイルをカスタマイズする例

コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...

CentOS の Nginx 公式 Yum ソースの設定を詳しく解説

私はプロジェクトの展開にAlibaba Cloudから購入したCentOSを使用しています。最近、プ...

MySQLユーザー管理操作例の分析

この記事では、MySQL ユーザー管理操作について説明します。ご参考までに、詳細は以下の通りです。こ...

Vue シンプル登録ページ + 確認コード送信機能の実装例

目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...

CSSポジションの5つの異なる値の使い方の詳細な説明

位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...

docker compose の使い方の詳しい説明

目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...

pagodaを使用してionCube拡張機能をインストールする方法

1. まずパゴダを設置するインストール要件: Python バージョン: 2.6/2.7 (Pago...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

Vueキャッシュ機能の使い方

目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...

安全な構成のためにDockerでTLSを有効にする手順

序文以前、Docker の 2375 Remote API を有効にしていました。会社のセキュリティ...

nginx アンチホットリンクおよびアンチクローラー設定の詳細な説明

新しい設定ファイルを作成します (たとえば、nginx インストール ディレクトリの下の conf ...

Dockerコンテナに入る方法と出る方法

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

MySQL 入門 - SQL 実行プロセス

目次1. プロセス2. コアアーキテクチャ2.1 サーバー層の基本コンポーネントの紹介3. ステート...

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...