Webサイトを作成中です。下記サイトのトップのメニューバーはオンマウスで色が変わるのですが、単なる画像の切替ではなく徐々にボタンの色が変わっています。このようなオンマウスの効果はどのように実装出来るでしょうか？

Question

koime_ryokutya

204

109もっと見る

コンピュータインターネット

Webサイトを作成中です。下記サイトのトップのメニューバーはオンマウスで色が変わるのですが、単なる画像の切替ではなく徐々にボタンの色が変わっています。このようなオンマウスの効果はどのように実装出来るでしょうか？

http://www.appcolle.jp/

回答の条件

1人5回まで

登録：2011/11/07 08:10:11
終了：2011/11/13 09:13:03

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

tdoi · Accepted Answer · 2011-11-08T18:46:31+09:00

他にも色々方法はあるでしょうが、提示されたサイトの手法を解析してみました。

かなりシンプルにするとこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<style type="text/css">
<!--
ul li.mPhone span { height: 0px; width: 160px; padding-top: 49px; overflow: hidden; display: block; background-image: url(./btn_menu.png); }
ul li.mPhone      { position: relative; float: left; background-image: url(./btn_menu.png); }

ul li.mPhone span { background-position: -160px 0px; }
ul li.mPhone      { background-position: -160px -98px; }
-->
</style>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>
<script language="JavaScript">
<!--
$(function() {
	$("ul li span").hover(function() {
		$(this).fadeTo(200, 0)
	},function() {
		$(this).fadeTo(150, 1.0)
	});
});
-->
</script>
</head>
<body>
<ul>
<li class="mPhone"><span>iPhoneアプリ</span></li>
</ul>
</body>
</html>

このhtmlを適当なところにそのまま作成して、同じディレクトリに、http://www.appcolle.jp/common/img/header/btn_menu.pngをダウンロードしてきて置いておけば動作します。

ここでやっていたのは、liの中にspanがある状況ですが、liとspanのそれぞれに背景画像を設定しておき、マウスの動きに応じて、jQueryのfadeToを使ってspanの方の透過度を徐々に変えることによりこの目的を達成していました。

アルファブレンディングの関係で徐々に色が変わっているように見えるのでしょうね。

もちょっと込み入ったことになってますが、同サイトでは、

背景画像の設定を、common/css/import.cssから読み込まれる common/css/layout.cssに

fadeToの動作の定義を、common/js/common.jsに

記述されています。

何かの参考になれば。

ベストアンサー

tdoi174752011/11/08 18:46:31

コメント（0件)

この質問への反応（ブックマークコメント）