jquery 導(dǎo)航條的效果(css選擇器控制)

2019-11-21 00:28:13

字體：大中小

供稿：網(wǎng)友

<div   id="iwvjtn8m0"   class="all"> <div   id="iwvjtn8m0"   class="m1" jquery1274844839136="1">標(biāo)題1</div> <div   id="iwvjtn8m0"   class="m2" jquery1274844839136="2">標(biāo)題2</div> <div   id="iwvjtn8m0"   class="m3" jquery1274844839136="3">標(biāo)題3</div> <div   id="iwvjtn8m0"   class="m4" jquery1274844839136="4">標(biāo)題4</div> <div   id="iwvjtn8m0"   class="m5" jquery1274844839136="5">標(biāo)題5</div> <div   id="iwvjtn8m0"   class="m6" jquery1274844839136="6">標(biāo)題6</div> </div> <div>進(jìn)入之后才能看到效果！</div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><script type="text/javascript"> $(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"); } </script> <style type="text/css"> .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; } </style>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：jquery 彈出公告功能代碼

下一篇：js實現(xiàn)GridView單選效果自動設(shè)置交替行、選中行、鼠標(biāo)移動行背景色