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可突破windows弹退效果代码
Aug 09 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js生成随机数的方法实例
Oct 16 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
vue 递归组件的简单使用示例
Jan 14 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
php curl选项列表(超详细)
2013/07/01 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
培养自己的php编码规范
2015/09/28 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python去掉空白行的多种实现代码
2018/03/19 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
大学生学期自我鉴定
2014/03/19 职场文书
环保倡议书500字
2014/05/15 职场文书
十周年庆典策划方案
2014/06/03 职场文书
物业消防安全责任书
2014/07/23 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
员工离职通知函
2015/04/25 职场文书
初中语文教学研修日志
2015/11/13 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python