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实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jquery实现网页定位导航
Aug 23 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
js+css3实现简单时钟特效
Sep 13 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新手用的Insert和Update语句构造类
2012/03/31 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript多线程详解
2015/08/12 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
python开发之文件操作用法实例
2015/11/13 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
集体婚礼证婚词
2014/01/13 职场文书
境外导游求职信
2014/02/27 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
法制宣传标语集锦
2014/06/25 职场文书
收款委托书范本
2014/09/11 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
python非标准时间的转换
2021/07/25 Python