サイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。 ImageFit ImageFit -GitHub ImageFitのデモ ImageFitの使い方 ImageFitのデモ デモはサイズがバラバラな画像が6枚、それぞれ同じサイズの矩形に配置します。 下のキャプチャは同じサイズの画像のように見えますが、既にトリミングして配置された状態です。
では、順に修正を施していこう。 1. jquery.jsをロードする jQueryをデプロイし、grayscale_image_test.htmlに次の1文を追加する。 <script src="jquery.min.js" type="text/javascript"></script> 2. JavaScriptコードをペーストする gray_scale_image_test.htmlに次のJavaScriptコードを追加する。(HTML5 Grayscale Image Hover - jQuery Codeより引用) このJavaScriptコードでおこなっている処理は次のとおり。 セレクタで選択した画像をもとに、グレースケール画像をCanvasで作成。オリジナル画像と同じ座標に表示する 画像にマウスカーソルが乗った(mouseover)際に、オリジナル画像の透明度(opacity
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く