jQueryロールオーバーボタン

images画像DL

http://siteya19.co.jp/ftadata/imges.zip

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ロールオーバー</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>

//nav1 マウスオーバー
$(function() {
//変数numに1を登録
var num = 1;
$('#nav1 li')
//マウスオーバー画像を配置
//each(function()は繰り返し
.each(function(){
$(this).css('background', 'url(imges/nav0'+num+'.gif) no-repeat 0px -29px')
num++;
})
//num++で1つ増やす
.find('img').hover(
function(){
$(this).stop().animate({'opacity' : '0'}, 500);
},
function(){
$(this).stop().animate({'opacity' : '1'}, 1000);
}
);
});

//nav2　アニメート
$(function() {
$('#nav2 li img')
.hover(
function(){
$(this).stop().animate({'marginTop':'-29px'},'fast');
},
function () {
$(this).stop().animate({'marginTop':'0px'},'fast');
}
);
});

//nav3 拡大ナビゲーション
$(function() {
$('#nav3 li img')
.hover(
function(){
$(this).stop().animate({
'width':'130px',
'height':'130px',
'marginTop':'-32px'
},'fast');
},
function () {
$(this).stop().animate({
'width':'70px',
'height':'70px',
'marginTop':'0px'
},'fast');
}
);
});
</script>
<style>
ul#nav1 li,ul#nav2 li {
float: left;
margin-left: -1px;
width: 100px;
height: 30px;
overflow: hidden;
}
ul#nav3 {
height: 130px;
margin-top:45px;
}
ul#nav3 li {
float: left;
margin-right: 5px;
}
ul{
list-style:none;
}
</style>
</head>

</div>
</body>
</html>

WEB制作の学習帳

WEB制作を様々な視点から学ぶブログ

jQueryロールオーバーボタン