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