jquery实现标题字体变换的滑动门菜单效果

本文实例讲述了jquery实现标题字体变换的滑动门菜单效果。分享给大家供大家参考。具体如下：

这里使用jquery字体会变大的网页滑动门菜单，当把鼠标放在"门"上的时候，门内的菜单字体会变大变色，对应的内容同时切换，不知如何形容本效果，所以就叫字体会变的滑动门吧。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-font-cha-tab-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title字体变大变色的滑动门菜单/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS '正文，ul，li，div { margin:0划水：0;} ul { list-style :无；} ul li { float:left}。nav { width:204px高度：30 pxborder:1px #ccc固体；边框-底部-宽度：0;边框-右侧-宽度：0 px余量：20px自动0;}.内容{ width:203px高度：150 pxborder:1px #ccc固体；margin:0 auto} ul。nav Li {宽度：50像素；高度：30 px右边框：1px #ccc实心；文本对齐：居中；线高：30 px背景技术# eee} ul。李导航。颜色{位置：相对；height :31 px _ top :1 xcolor : # F60 font-size :22 px；字体粗细：加粗；背景： # FFF；} ul。内容Li { width :202 px高度：170 pxdisplay:none文本对齐：居中；线高：170 px} ul。内容李。vis { display : block}/style/head body ul class=' nav ' Li class=' color '新闻/li li娱乐/li li体育/li li招聘/Li/ul ul ul class=' content ' Li class=' vis '新闻内容/li li娱乐内容/li li体育内容/li li招聘内容/Li/ulscript type=' text/JavaScript '/*-获取元素的编号或class-*/function GetElement(e){ if($(' # ' e)).html()){ return $(" # " e)；}else{ return $(' .e)；}}/* - 定义对象和方法- *//* - @param navElement导航栏的编号或class @param conElement导航内容的编号或class @param visClass导航栏变色的clssname @param colorClass导航内容显示的类名-*/var onNav={ change content : function(nav element，conElement，visClass，color class){ $ nav=getElement(nav element).find(' Li ')；$content=getElement(conElement).find(' Li ')；$nav .每人(函数（索引){ $(这个)).mouseover(函数(){ $(this)).添加类(visClass).兄弟姐妹()。移除类(visCLaSS)；$content.eq(索引)。添加类（颜色类)。兄弟姐妹()。removeClass(颜色类);});});}}/*实例化对象方法*/onNav.changeContent('nav '，' Content '，' color '，' vis ')；/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。