带缓冲效果的导航菜单栏,鼠标指向放大显示

发布时间：2018-08-24 04:33:53 所属栏目：政策来源：站长网

导读：本文介绍给大家是带缓冲效果的导航菜单栏，这是一个样式很普通的纵向导航栏，懂得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>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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