画像の一時停止を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 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 タイプを使用することです。コードを...