Houn

  • HOME
  • Hounについて
  • ブログ
  • 制作実績
  • お問い合わせ
hide-img-top
2019.08.6

Web制作メモ

【jQuery】画像の表示・非表示を切り替える

広告

クリックすると隠れてた画像が表示される仕様を組んでみました。

https://tanomasaki.com/wp-content/uploads/2019/08/hide-img.mp4

実例的には”閲覧注意”の画像をサイト内に設置する必要があったからです。標準を非表示にして、クリックして初めて画像が現れるようにしました。

「表示するぞ?!いいんだな?」ってワンクッション置く感じ。以下、サンプルとして置いておきますのでよかったら。コピペで使えます。

HTML

CSS

jQuery

Share onSNSでシェア

Related Posts関連記事

ios-input-css
【iOS】input要素にwebkit-appearance: noneが効かないときの対処
scroll-change-headernav
スクロールで色が変わるヘッダーナビのjQueryサンプル
headernav-fixed
position:fixedで固定ヘッダーnavを作ったら、直下の要素が隠れちゃったとき

カテゴリー

  • Web制作メモ
  • コラム
一覧へ戻る

広告

pagetop-arrow

Copyright © Houn. All Rights Reserved