javascript - 記事内のフロントエンド画像を実装する方法。クリックするとポップアップ表示され、クリックすると縮小されます。

Question

最近のプロジェクトで、メンバーが公開した記事がありましたが、その記事のイラストを携帯電話で表示すると、表示するにはズームインする必要があり、クリックして拡大することができない場合があります。

ここではimgタグのみ操作可能です。

$("img").click(function(){

リーリー

})

imgにhrefというタグを付けてimgのパスを書くと画像は出ますが戻ることはできません 解決方法

表示されている図と同様に、このフロントエンドまたはプラグインを実装する方法を説明します!

Answer 1

画像をクリックして新しいマスクレイヤーを作成します。マスクレイヤー内の画像のソースは、クリックしたターゲットのソースと同じです

Answer 2

画像効果用の jquery プラグインをご覧ください。これをプロジェクトに直接導入し、いくつかの設定を行うと実装されます。
このエフェクトのように: http://www.jq22.com/yanshi6536

Answer 3

自分で達成したいなら

つまり、画像をクリックすると、画像がタグのレイヤーで包まれるということだと思います

考え方は変えられる

クリック後にジャンプする場合はlocation.hrefを使うとjsでジャンプするか戻るかを判断しやすくなります

ポップアップ後の大きな画像には黒い背景があり、実際、ユーザーは黒い背景をクリックして戻ることができます。

背景と画像の間に階層関係が確立されています。event.target を使用して、クリックされた画像が写真であるか黒の背景であるかを判断します。

ジャンプするか戻るかを決める

Answer 4

この種のプラグインについて話しています http://refined-x.com/Flow-UI/...

Answer 5

モバイル版については書いていませんが、PC版でも同様の効果について書きました。
その方法は、通常は非表示になっているマスクレイヤーを追加することです。画像がクリックされると、マスクレイヤーは toggle() を実行し、画像の src 属性をマスクレイヤーの img に割り当てます。
もちろん、最大幅、最大高さ、中央揃えなど、マスクレイヤー画像のスタイルを設定する必要があります。
最後に、マスクレイヤーのレベルを最高にする必要があります。