Createing Web site Study Blog ~ WEB制作に関するお勉強ブログ ~

  • Share on Tumblr


ロールオーバーするとサムネイル画像が拡大表示されるサンプルを作ってみる。


jQueryアニメーション(animateメソッド)の使い方


書式



HTML部分



サムネイル画像のデフォルト値を設定する。
透明度30%、サイズはデフォルトの1/2のサイズで表示しておきます。


スクリプト部分



マウスイベントを追加します。
hoverイベントを用いて、画像にマウスを乗せた時には、画像をデフォルトのサイズ、透明度100%にします。
マウスを外した時には初期値に戻すようにします。

hover( )イベントは以下のようになるので、



スクリプト部分



サンプルはこちら

コメントを残す

コメントを投稿するにはログインしてください。