Home > スポンサー広告 > Reflection:掲載画像をWeb2.0風に反射させるJavaScript


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/98-928fec2b
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > Reflection:掲載画像をWeb2.0風に反射させるJavaScript

Home > IT Tips > Reflection:掲載画像をWeb2.0風に反射させるJavaScript


Reflection:掲載画像をWeb2.0風に反射させるJavaScript

Reflection.js

Web2.0によってWebのインターフェイス系が扱いやすく(ajax/MashUp)、レイアウト系が見やすく(丸角画像・反射画像・グラデーションカラーなど)なってきた。そこで、簡単なJavaScriptの記述と掲載画像へのクラス付加によって、反転させる手法を紹介したいと思います。
サンプルとして以下に比較画像を載せましたが、Highslide JS・Shadowboxどちらかを実装後、動作しなくなりましたので、まったく同じ画像で表示されています。20071230_01.jpg通常だとこのような画像。
これが、以下の手順を行うことによって下の画像みたいになるのです。
1.この記事一番上の Reflection.js へアクセス
2.ページ真ん中あたりのダウンロードから js をダウンロード
3.ダウンロードした js(reflection.js)をサイト・ブログへアップロード
4.html内のhead間にreflection.jsを呼ぶscriptを記述
5.掲載画像のclassをreflectにする


20071230_01.jpg上記の工程を行うとこんな風に反射します。
FYI:以下サイトではもっと手順が詳しく掲載されています
DesignWalker|CSSとJavaScriptで画像を鏡に反射したようにさせてみる
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/98-928fec2b
Listed below are links to weblogs that reference
Reflection:掲載画像をWeb2.0風に反射させるJavaScript from TRASH

Home > IT Tips > Reflection:掲載画像をWeb2.0風に反射させるJavaScript

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。