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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
JavaScript计算出两个数的差值
2020/03/19 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
python中os包的用法
2020/06/01 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
环保倡议书格式范文
2014/05/14 职场文书
自查自纠工作总结
2014/10/15 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
对学校的意见和建议
2015/06/04 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle