画像の一時停止を実現する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 の説明
推薦する
入力ファイルのカスタムボタンの美化（デモ）
以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...
MySQL挿入パフォーマンスを最適化する方法の例
MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...
docker run によって起動されたコンテナがハングしてデータが失われた場合の対処方法
シナリオの説明あるシステムでは、機能サービスはdocker stack deploy xxxで起動し...
Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項
1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...
Webpack プロジェクトでローダー プラグインをデバッグする方法
最近、webpackの使い方を学んでいたときに、webpack-replace-loaderの設定正...
実務経験7年のフロントエンドスーパーバイザーによる経験共有
今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...
よく忘れられがちな CSS のヒント 26 選
これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...
sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する
需要シナリオ:上司は、クローラーを使用してMySQLデータベースにデータを書き込んだり更新したり...
CSSコンテンツ属性の具体的な使用法
コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...
ウェブサイトのデザイン体験のための7つの異なるカラースキーム
ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...
よくある CSS エラーと解決策
コードをコピーコードは次のとおりです。 IE6 と FF の違い: background:orang...
Linux の Makefile とは何ですか? どのように機能しますか?
この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...
Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?
IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...
MYSQL（電話番号、IDカード）データ非感応化の実装
1. データ感度低下の説明日常の開発ニーズでは、データの感度低下が頻繁に発生します。たとえば、ID ...
CentOS に Redis と MySQL をインストールする
1|0MySQL（MariaDB） 1|11. 説明MariaDB データベース管理システムは My...