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


Posted in Javascript onSeptember 07, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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.6.2.min.js"></script>
<style type="text/css">
body,ul,li,div{
 margin:0;
 padding:0;
}
ul{
 list-style:none;
}
ul li{
 float:left;
}
.nav{
 width:204px;
 height:30px;
 border:1px #ccc solid;
 border-bottom-width:0;
 border-right-width:0px;
 margin:20px auto 0;
}
.content{
 width:203px;
 height:150px;
 border:1px #ccc solid;
 margin:0 auto;
}
ul.nav li{
 width:50px;
 height:30px;
 border-right:1px #ccc solid;
 text-align:center;
 line-height:30px;
 background:#eee;
}
ul.nav li.color{
 position:relative;
 height:31px;
 _top:1px;
 color:#F60;
 font-size:22px;
 font-weight:bold;
 background:#FFF;
}
ul.content li{
 width:202px;
 height:170px;
 display:none;
 text-align:center;
 line-height:170px;
}
ul.content li.vis{
 display:block; 
}
</style>
</head>
<body>
 <ul class="nav">
  <li class="color">新闻</li>
 <li>娱乐</li>
 <li>体育</li>
 <li>招聘</li>
 </ul>
 <ul class="content">
  <li class="vis">新闻内容</li>
 <li>娱乐内容</li>
 <li>体育内容</li>
 <li>招聘内容</li>
 </ul>
<script type="text/javascript">
/*----获取元素的id或class----*/
function getElement(e){
 if($('#'+e).html()){
  return $('#'+e);
 }else{
  return $('.'+e); 
 }
}
/*----定义对象和方法----*/
/*------------------------------------------
 @param navElement 导航栏的id或class
 @param conElement 导航内容的id或class
 @param visClass 导航栏变色的clssname
 @param colorClass 导航内容显示的classname
-------------------------------------------*/
var onNav={
 changeContent:function(navElement,conElement,visClass,colorClass){
  $nav=getElement(navElement).find('li');
  $content=getElement(conElement).find('li');
  $nav.each(function(index){
   $(this).mouseover(function(){
    $(this).addClass(visClass)
     .siblings().removeClass(visClass);
    $content.eq(index).addClass(colorClass)
     .siblings().removeClass(colorClass); 
   });
  });
 }
}
/*实例化对象方法*/
onNav.changeContent("nav","content","color","vis");
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
javascript中数组方法汇总
Jul 07 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
关于JS中prototype的理解
Sep 07 #Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
You might like
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
教你php如何实现验证码
2016/01/20 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
常用python编程模板汇总
2016/02/12 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
领导的自我鉴定
2013/12/28 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
节水倡议书范文
2014/04/15 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
返乡农民工证明
2015/06/24 职场文书
人民币使用说明书
2019/04/17 职场文书
Python 中random 库的详细使用
2021/06/03 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫