- Sponsored Link -
４枚の画像をマウスオーバーでスムーズに拡大・縮小！
auのアドセンス広告がかっこよかったので、JavaScriptでマネしてみました
auのスマートフォンのFlash広告がなかなかおしゃれだったので、「JavaScriptで真似してみよう」と思って作ってみました
完成品・コードサンプルはこちら
①JavaScript
jQueryの .mouseover メソッドと .hover メソッドを両方使用します。前者はマウスの乗った画像をボーダーで囲み、後者は画像の拡大・縮小をします。
.hover メソッド中で重要なのは、setTimeoutで開始タイミングを遅らせ、 .stop メソッドで実行中のアニメーションを中断すること。これをしないと動作がエラーっぽくなってしまいました。.stopは必須にしても、setTimeoutするとちょっとスムース感が損なわれてしまいます。どなたか、解決方法ご存知でしたら是非教えて下さい。
ほかは、.animate と .css でやりたいように見た目を変更していくだけ。z-indexの値を変える事で、マウスオーバーした画像が4枚の中で一番下に来るようになります。最後にマウスアウトしたときに元の状態になるように指定して終わりです。
②HTML, CSS
画像のサイズはシビアに指定しなければなりません。このサンプルの場合はアドセンス広告の300-250サイズに合わせます。さらにボーダーを1px分指定したのでマウスオーバーをしていない状態では4枚の画像はそれぞれ幅149px-高さ124pxでぴったり収まるようになります。全体のサイズやボーダーの有無などによって変わるところですので、カスタマイズして下さい。
また、個別のimgタグをposition指定して、それぞれを四隅に配置していきます。position:absoluteにしなければアニメーションが上手く行きませんので、こちらは必須です。
- Sponsored Link -