画像の一時停止を実現する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 の説明
推薦する
CSS3 FlexBox の伸縮自在なレイアウトを 10 分で理解する
基本的な紹介特徴Flexbox は、よりシンプルで効率的なレイアウト方法を提供する CSS 表示タイ...
LinuxにNginxをインストールする正しい手順
序文私のように、Java バックエンドに勤勉な人であれば、多数のプロジェクト機能を実装することに加え...
JavaScriptを使って動的にテーブルを生成するケースの詳しい説明
目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...
IE6/IE7/IE8/IE9/FF 向け CSS ハック (概要)
IE8.0の正式版をインストールしたので、基本的なCSS HACKをいくつかまとめてみました。We...
ドロップダウンメニューを実装するためのネイティブ js
ドロップダウン メニューも実生活では非常に一般的です。実装に使用される js コードは、タブ選択やア...
Web デザイン: Web ミュージックの実装テクニック
<br />Web ページに音楽を挿入する場合、サフィックスに応じて異なるコードを記述す...
Reactは適応性の高い仮想リストを実装する
目次変換前:変換後: 0x0の基本0x1 「固定高さ」の仮想リストを実装する原理：最適化： 0x2 ...
ReactRouterの実装
ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...
macOS SierraにApache2.4+PHP7.0+MySQL5.7.16をインストールする
Mac システムには PHP と Apache が付属していますが、必要なバージョンではない場合があ...
Alibaba Cloud イメージリポジトリの Docker 構成変更の実装
docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...
Linux コマンドで .sql ファイルをエクスポートおよびインポートする方法
この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...
CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル
目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...
アルバムと写真をアルバムに保存するためのWeChatアプレット
私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...
HTMLの基礎: HTMLの基本構造
HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...
MySQL シリーズ 12 バックアップとリカバリ
目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...