jquery 导航条的效果(css选择器控制)
标题1
标题2
标题3
标题4
标题5
标题6
进入之后才能看到效果!
$(document).ready(function () {
myHide();
});
function myHide() {
//alert("hello");
//注册事件
$(".m1").bind('mouseover', m1_mouseover);
$(".m1").bind('mouseout', m1_mouseout);
$(".m2").bind('mouseover', m2_mouseover);
$(".m2").bind('mouseout', m2_mouseout);
$(".m3").bind('mouseover', m3_mouseover);
$(".m3").bind('mouseout', m3_mouseout);
$(".m4").bind('mouseover', m4_mouseover);
$(".m4").bind('mouseout', m4_mouseout);
$(".m5").bind('mouseover', m5_mouseover);
$(".m5").bind('mouseout', m5_mouseout);
$(".m6").bind('mouseover', m6_mouseover);
$(".m6").bind('mouseout', m6_mouseout);
};
function m1_mouseover() {
$(".m1").animate({ width: "100px", height: "30px",fontSize:"22px" }, "fast");
}
function m1_mouseout() {
$(".m1").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m2_mouseover() {
$(".m2").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m2_mouseout() {
$(".m2").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m3_mouseover() {
$(".m3").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m3_mouseout() {
$(".m3").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m4_mouseover() {
$(".m4").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m4_mouseout() {
$(".m4").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m5_mouseover() {
$(".m5").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m5_mouseout() {
$(".m5").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
function m6_mouseover() {
$(".m6").animate({ width: "100px", height: "30px", fontSize: "22px" }, "fast");
}
function m6_mouseout() {
$(".m6").animate({ width: "70px", height: "20px", fontSize: "14px" }, "fast");
}
.m1,.m2,.m3,.m4,.m5,.m6
{
width:70px;
height:20px;
background-color:#cccccc;
border: thin solid #9999ff;
font-size:14px;
}
.all
{
width:80px;
height:160px;
text-align:center;
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]