画像の一時停止を実現する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 5.7 解凍版のインストール、アンインストール、および文字化けしたコードの問題のグラフィック解決
1. 解凍版のインストール（1）圧縮パッケージをダウンロードし、ディスクの場所に解凍します。圧縮パッ...
JS を使用してバイナリ ツリー トラバーサル アルゴリズムのサンプル コードを実装する
目次序文1. バイナリツリー1.1. 二分木の走査1.2. jsを使用してバイナリツリーを表現する1...
CSS3 で less のテキストの長い影を実装する
この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...
MySQL MyISAM と InnoDB の違い
違い： 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...
Nginx イントラネット スタンドアロン リバース プロキシの実装
目次1 Nginxのインストール2 Nginxの設定3 ホストファイルを変更する4 テストNginx...
MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明
目次導入効果原理形状練習するこの記事では、例を使用して、MySQL マスター/スレーブ レプリケーシ...
innerHTML アプリケーション
ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...
指定された期間内のすべての日付または月を取得する MySQL ステートメント (ストアド プロシージャの設定やテーブルの追加は不要)
mysql は期間内のすべての日付または月を取得します1: mysqlは期間内のすべての月を取得し...
Linux環境でrmによって誤って削除されたファイルを回復する方法
目次序文RMの後には希望はあるのでしょうか？最前線を使ってファイルを取得するextundeleteを...
Python Flask WeChat アプレットのログインプロセスとログイン API 実装コード
1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...
Adobe Brackets の簡単な使い方のグラフィックチュートリアル
Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...
win10にmysql 8.0.18-winx64をインストールする詳細な手順
1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...
Reactは適応性の高い仮想リストを実装する
目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理：最適化： 0x2 ...
ふるい抽選を実施するミニプログラム
この記事の例では、ふるい抽選を実装するためのミニプログラムの具体的なコードを参考までに共有しています...
ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます
ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...