演示
无标题文档
- 网站首页
- 网站首页
- 网站首页
- 网站首页
- 网站首页
- 网站首页
- 网站首页
代码
<!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <style> #x1,#x2,#x3,#x4,#x5,#x6,#x7{float:left;display:block;background:#000;color:#FFF;padding:5px 10px 5px 10px;text-align:center;font-size:12px} .aaa{} </style> </head> <body> <script type="text/javascript"> //鼠标进入时的动作效果 function con(baba) { $(baba).stop(); $(baba).animate({paddingLeft:30,paddingRight:30,paddingTop:20,paddingBottom:20,fontSize:"40px",},200); $(baba).css("color","#FF0"); }; //鼠标离开时的动作效果 function coff(baba) { $(baba).stop(); $(baba).animate({paddingLeft:10,paddingRight:10,paddingTop:5,paddingBottom:5,fontSize:"12px"},200); $(baba).css("color","#FFF"); }; //鼠标进入时的传递配置子程序 function banenter(baba) { $(baba).mouseenter( function() { con(baba);//匹配效果 } ); }; //鼠标离开时的传递配置子程序 function banleave(baba) { $(baba).mouseleave( function() { coff(baba);//匹配效果 } ); }; $(document).ready(function(){ banenter("ul li#x1"); banenter("ul li#x2"); banenter("ul li#x3"); banenter("ul li#x4"); banenter("ul li#x5"); banenter("ul li#x6"); banenter("ul li#x7"); banleave("ul li#x1"); banleave("ul li#x2"); banleave("ul li#x3"); banleave("ul li#x4"); banleave("ul li#x5"); banleave("ul li#x6"); banleave("ul li#x7"); }); </script> <div class="aaa"> <ul> <li id="x1">网站首页</li> <li id="x2">网站首页</li> <li id="x3">网站首页</li> <li id="x4">网站首页</li> <li id="x5">网站首页</li> <li id="x6">网站首页</li> <li id="x7">网站首页</li> </ul> <h1></h1> <h2></h2> </div> </body> </html>