jquery web制作

[気分jquery]マウスオーバーで背景画像を滑らかに変える[jquery] mouse over change background image

スポンサーリンク
スポンサーリンク

2009/05/09

-jquery, web制作
-



サンプル:こんな感じで滑らかにマウスオーバーします。

jQuery: The Write Less, Do More, JavaScript Libraryよりjquery-1.3.2.min.jsをダウンロードする
下記ソースをheadタグに書く。
[source language="html"]
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#info_btn li a").css("opacity","0");
//初期設定として画像のopacityを0にします。
$("#info_btn li a").hover( //hoverです。
function () {
$(this).stop().animate({opacity: 1}, 'slow');},
//マウスオーバー時にopacityを1にします。
function () {
$(this).stop().animate({opacity: 0}, 'slow');}
//マウスアウト時にopacityを0に戻します。
);
});
});
</script>
[/source]
css には下記を記述
[source language="html"]
#info_btn li{
list-style-type:none;
width:189px;
height:35px;
}

#info_btn {height:35px;margin:0;padding:0;}
#info_btn li a { display:block;height:35px;width:189px;text-indent:-9999px;}
#info_btn li#nav1 {background:url(../img/news_btn_off.jpg) no-repeat;}
#info_btn li#nav1 a {background:url(../img/news_btn_on.jpg) 0px -35px;}
[/source]

スポンサードリンク

-jquery, web制作
-

おすすめ「フォトギフト写真カレンダーサービスOKURU」

こどもの大切な記録をさまざまな形で残せるところがすごくいい!! スマホの中の写真を選ぶだけで、オリジナルフォトギフトがお手元に届きます。 特製パッケージに入れてお届けするので、大切なご家族へのプレゼントにもおすすめです。

母の日ギフトなどにも使えます!

「OKURU 」の"ダウンロード"はこちら

 

-jquery, web制作
-

Copyright© LAGRANGE BLOG , 2021 All Rights Reserved.