Image Zoomer

SeeKeR5084

License: MIT License

Fork
0
Fav
1
View
2607
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 172 lines
  • HTML 22 lines
  • CSS 58 lines
画像に拡大アニメーションをくっ付ける関数。この画像拡大アニメーションはJavaScritpだけで実現しています!

【適用方法は簡単です】
リンク先が画像である<a>にはさまれた<img>を見つけると、その<img>に拡大アニメーションを(勝手に)くっ付けます。HTMLタブ参照。

【ちょっと説明】
拡大される画像は<img>のsrcではなく、<a>のhrefのリンク先画像の方が拡大されます。よって、ページに表示されている画像とは違う画像(<a>のリンク先画像)を拡大表示させることも出来ます。

【逃げ方】
<img>にid="nozoom"を加えると拡大アニメーションがくっ付きません。

【こだわりの一部】
拡大後にページ全体を覆うオーバーレイは、ページレイアウトを崩さないようにするため、背景色と同じ色で表示されます。背景色を取得して適用する様子を確認できるよう、5種類の背景色を用意しました。

【操作方法】
画像拡大アニメーションが適用された画像をクリックして拡大。拡大後、拡大された画像をクリックして閉じます。

【おすすめと対応状況】
サンプルはぜひフルスクリーンでどうぞ。
Chrome, Opera, Firefox, Safari, IEで動作確認済みですが、旧バージョンだと動作しない場合があります。最新版のブラウザでお楽しみ頂けるとうれしいです。
  • Image Zoomer
  • Image Zoomer

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

SeeKeR5084

Author

URLはウェブログ"The Strange Storage"です。 私の脳内記憶専用の外部ストレージとして使用しています。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by