带缓冲结果的导航菜单栏,鼠标指向放大表现

发布时间：2018-08-20 12:24:47 所属栏目：创业来源：站长网

导读：本文先容给各人是带缓冲结果的导航菜单栏，这是一个样式很平凡的纵领导航栏，分明css的伴侣可以本身修改表现的结果（不懂css的伴侣可以到猛火提供的css中文手册进修一下），本教程中的殊效是基于 jQuery 1.4.2编写的，首要殊效是：当鼠标颠末菜单栏时，相

　　本文先容给各人是带缓冲结果的导航菜单栏，这是一个样式很平凡的纵领导航栏，分明css的伴侣可以本身修改表现的结果（不懂css的伴侣可以到猛火提供的css中文手册进修一下），本教程中的殊效是基于jQuery1.4.2编写的，首要殊效是：当鼠标颠末菜单栏时，响应的导航地区就会放大表现。

　　费话不多说了，下面来看一下这款菜单殊效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>带缓冲结果的导航菜单栏,鼠标指向放大表现 - 猛火网 | 为网页计划、WEB开拓与网站运营提供动力！</title> <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> </head> <body> <div class="all"> <div class="m1" jquery1274844839136="1">问题1</div> <div class="m2" jquery1274844839136="2">问题2</div> <div class="m3" jquery1274844839136="3">问题3</div> <div class="m4" jquery1274844839136="4">问题4</div> <div class="m5" jquery1274844839136="5">问题5</div> <div class="m6" jquery1274844839136="6">问题6</div> </div> <div>猛火提醒：鼠标指向问题才会看到结果哦！</div> <script type="text/javascript" src="/uploads/common/js/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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如