画像の一時停止を実現する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 の説明
![MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]](/upload/images/67cad65b34c8f.webp)
推薦する
テーブルテーブルはnth-child()を使用して、交互の色の変更と配置を実現します。
コアコード <!DOCTYPE html> <html lang="ja...
TypeScript の条件型に関する詳細な読書と実践記録
目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...
etcd クラスターをデプロイするための docker-compose の実装手順
目次docker-compose.ymlを書くdocker-composeを実行するビルドステータス...
CSS3のtransform属性で実装される4つの機能
CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...
URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述
目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...
MySQL イベント スケジューラに関するよくある話 (必読)
概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...
JavaScriptを使用して独自のAjax関数を定義する
ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...
Dockerfile を使用して Docker でイメージを構築する方法
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
MySQL バージョン 5.7.24 のデータベース インストール プロセスの詳細なグラフィック説明
MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...
MySQL 8.0.12 のインストールと使用方法のチュートリアル
MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...
15 分で学べる並列アーティファクト GNU Parallel 入門ガイド
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
どのような種類の MYSQL 接続クエリを知っていますか?
序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...
nginx で複数の仮想ホストを設定する方法の例
nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...
Vue3.0 手書き拡大鏡効果
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
MySQLパスワードを変更するいくつかの方法
序文：データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...