ホームページ > 記事 > ウェブフロントエンド > jQuery は、マウスの背景の変更に応答する動的なメニュー効果コードを実装します_jquery
jQuery は、マウスの背景の変更に応答する動的なメニュー効果コードを実装します_jquery
- WBOYオリジナル
- 2016-05-16 15:42:041132ブラウズ
この記事の例では、マウスの背景の変化に応答する動的メニュー効果コードの jQuery 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、マウスの背景の変更に応答する jQuery の動的メニューです。このメニューの実装では、主に画像を使用します。ちょっと面倒ですが、導入したjqueryプラグインはバージョン1.7なので、問題ありません。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-codes/
具体的なコードは次のとおりです:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
body{
background-color: #333; color:#FFFFFF
}
a{ color:#FFCC00;}
#menuBar{
overflow:hidden;
width:503px;
height:102px;
background: transparent url(images/bar.jpg) no-repeat scroll left top;
margin:0 auto;
border:10px solid #111;
}
#menuBar ul{
width:380px;
margin:0 auto;
list-style-type: none;
}
#menuBar ul li{
float:left;
padding-right:40px;
}
#menuBar a{
width:55px;
height:102px;
display:block;
background: transparent url(images/logos.jpg) no-repeat scroll left top;
padding-top:100px;
color:#ddd;
font-family: Arial, "MS Trebuchet", sans-serif;
text-decoration: none;
font-size:10pt;
font-weight:bold;
outline:none;
}
#menuBar a:hover{
background-image:url(images/logos-over.jpg);
}
#menuBar a#Home{
background-position:-67px top;
}
#menuBar a#About{
background-position:-166px top;
}
#menuBar a#Gallery{
background-position:-266px top;
}
#menuBar a#Contact{
background-position:-373px top;
}
</style>
</head>
<body>
<div id="menuBar">
<ul>
<li><a href="#" id="Home">Home</a></li>
<li><a href="#" id="About">About</a></li>
<li><a href="#" id="Gallery">Gallery</a></li>
<li><a href="#" id="Contact">Contact</a></li>
</ul>
</div><br />
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("a").mouseover(function(){
var selected = "#"+$(this).attr("id");
$(selected).animate({paddingTop:"78px"}, 100);
}).mouseout(function(){
var selected = "#"+$(this).attr("id");
$(selected).animate({paddingTop:"100px"}, 100);
});
});
</script>
</body>
</html>
この記事が皆さんの jquery プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。