まず１つ目。拡大鏡。 新型V-MAXにマウスカーソルを持ってくるとその部分が拡大されます。 ２つ目。白黒→カラーエフェクト。 同じくマウスカーソルを持ってくるとその部分がカラーになります。 使い方は簡単。 こちらからJavascriptとCSSをダウンロードします。 後はこちらのソースを参考にすれば終わり。（画像は適宜必要です） アイデア次第でいろんな事が出来そうです。 このJavascriptの作者は、あのJavascriptマリオとJavascriptマリオカートの作者。
Javascriptによる画像効果２つ from HiroIro
まず１つ目。拡大鏡。 新型V-MAXにマウスカーソルを持ってくるとその部分が拡大されます。 ２つ目。白黒→カラーエフェクト。 同じくマウスカーソルを持ってくるとその部分がカラーになります。 使い方は簡単。 こちらからJavascriptとCSSをダウンロードします。 後はこちらのソースを参考にすれば終わり。（画像は適宜必要です） アイデア次第でいろんな事が出来そうです。 このJavascriptの作者は、あのJavascriptマリオとJavascriptマリオカートの作者。
画像にGoogleMapみたいにズームできる機能をつけるJS「shiftzoom.js」:phpspot開発日誌
shiftzoom.js (zoom and pan functionality) shiftzoom.js 1.0 allows you to add zoom and pan functionality to oversized images on your webpages.画像にGoogleMapみたいにズームできる機能をつけるJS「shiftzoom.js」 大きい画像をズームできるようにして詳細を見れるようにする場合に使えます。 画像左上の＋、−アイコンでズームします。 拡大時には右下に全体が現れて、どの部分を拡大しているかがわかります。 色々とアイデア次第で面白いことが出来そうですね。
画像をクールにズームできるJavaScript「Magic Zoom」:phpspot開発日誌
Magic Zoom : JavaScript image zoom tool Magic Zoom・is a JavaScript zoom tool. It's the best way to display images in incredible detail.画像をクールにズームできるJavaScript「Magic Zoom」 マウスオーバーで次のように、オーバーした部分をズームできます。 デモを見る メジャーブラウザはほぼ対応している模様。 $49と、シェアウェアなのが残念ですが、それなりのクオリティでもあると思うので、こうした機能を手軽に実装したい人は買ってみるのもよいかも。
【ハウツー】ゼロからはじめるZoomi -単純だけど面白い!スクリプト要らずのWeb画像拡大術 (1) ゼロからはじめるZoomi -単純だけど面白い!スクリプト要らずのWeb画像拡大術 | パソコン | マイコミ
Zoomiとは？ Zoomiは、サムネール画像にマウスが重なったときに拡大画像を表示するというライブラリです。 サムネール画像上にマウスを重ねると迅速に拡大画像が表示される より正確に説明すると、サムネール画像と、拡大時に表示する画像の2種類を用意しておき、マウスがサムネール画像に重なった際に拡大時画像を表示するという仕組みになっています。 一方、大きな画像に対して小さなサイズのものを表示するといった逆の処理は正しく行なわれないので注意が必要です。つまり、同じサイズの画像か、それよりも大きいサイズの画像でないと正しく動作しません。 Zoomiは、HTMLページ内にスクリプト(プログラム)を記述しなくてよいという利点があり、全くプログラムが分からない人でも気軽に使えます。ZoomiではHTMLの<img>タグのclass属性にzoomiを指定し、マウスオーバー時に表示する画像のURLをalt
画像カーソル位置をズームインできるライブラリ「tjpzoom.js」:phpspot開発日誌
valid.tjp.hu - tjpzoom.js 2.0 - JavaScript / CSS / DOM image magnifier As you may have realized, this is a tool that brings images closer. This is the new version of my script, tjpzoom. 画像カーソル位置をズームインできるライブラリ「tjpzoom.js」。 次のように、カーソル位置の画像をズームできます。 知っておけば、ウォーリーを探せ風の簡単なゲームを作ったり、サイトのキャンペーンとしての面白い１要素として使えそう。 設置方法は簡単で、まず、次のようにスクリプトを読み込みます。 <script type="text/javascript" src="http://valid.tjp.hu/zoom2/tj
Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション
Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。 対応ブラウザ Firefox 等の Gecko 系 Internet Explorer 7 beta 2 テキストをズーム CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1 li { font-size: 1em
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Mapsで超ズームを実現する裏技 | i d e a * i d e a
Home | Zoomify™