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 EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
jquery实现图片轮播器
May 23 jQuery
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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应用技巧
2008/03/27 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP 实现重载
2021/03/09 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Python列表切片操作实例总结
2019/02/19 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Form表单及django的form表单的补充
2019/07/25 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python字符串及文本模式方法详解
2020/09/10 Python
经贸专业毕业生求职信
2014/03/23 职场文书
中考标语大全
2014/06/05 职场文书
高中综合实践活动总结
2014/07/07 职场文书
社区干部培训心得体会
2016/01/06 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js
Java获取字符串编码格式实现思路
2022/09/23 Java/Android