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 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
关于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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python socket编程实例详解
2015/05/27 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python 网络编程详解及简单实例
2017/04/25 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
【python】matplotlib动态显示详解
2019/04/11 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python socket处理client连接过程解析
2020/03/18 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
自荐信模版
2013/10/24 职场文书
财务简历的自我评价
2014/03/05 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
企业党建工作总结2015
2015/05/26 职场文书