jQuery实现带幻灯的tab滑动切换风格菜单代码


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码。分享给大家供大家参考。具体如下:

这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡。

运行效果截图如下:

jQuery实现带幻灯的tab滑动切换风格菜单代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的带幻灯效果的tab风格导航菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
;(function( $ ){
 var $scrollTo = $.scrollTo = function( target, duration, settings ){
 $(window).scrollTo( target, duration, settings );
 };
 $scrollTo.defaults = {
 axis:'xy',
 duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
 };
 $scrollTo.window = function( scope ){
 return $(window)._scrollable();
 };
 $.fn._scrollable = function(){
 return this.map(function(){
  var elem = this,
  isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
  if( !isWin )
   return elem;
  var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
  return $.browser.safari || doc.compatMode == 'BackCompat' ?
  doc.body : 
  doc.documentElement;
 });
 };
 $.fn.scrollTo = function( target, duration, settings ){
 if( typeof duration == 'object' ){
  settings = duration;
  duration = 0;
 }
 if( typeof settings == 'function' )
  settings = { onAfter:settings }; 
 if( target == 'max' )
  target = 9e9;
 settings = $.extend( {}, $scrollTo.defaults, settings );
 duration = duration || settings.speed || settings.duration;
 settings.queue = settings.queue && settings.axis.length > 1;
 if( settings.queue )
  duration /= 2;
 settings.offset = both( settings.offset );
 settings.over = both( settings.over );
 return this._scrollable().each(function(){
  var elem = this,
  $elem = $(elem),
  targ = target, toff, attr = {},
  win = $elem.is('html,body');
  switch( typeof targ ){
  // A number will pass the regex
  case 'number':
  case 'string':
   if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
   targ = both( targ );
   // We are done
   break;
   }
   // Relative selector, no break!
   targ = $(targ,this);
  case 'object':
   // DOMElement / jQuery
   if( targ.is || targ.style )
   // Get the real position of the target 
   toff = (targ = $(targ)).offset();
  }
  $.each( settings.axis.split(''), function( i, axis ){
  var Pos = axis == 'x' ? 'Left' : 'Top',
   pos = Pos.toLowerCase(),
   key = 'scroll' + Pos,
   old = elem[key],
   max = $scrollTo.max(elem, axis);
  if( toff ){// jQuery / DOMElement
   attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
   // If it's a dom element, reduce the margin
   if( settings.margin ){
   attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
   attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
   }
   attr[key] += settings.offset[pos] || 0;
   if( settings.over[pos] )
   // Scroll to a fraction of its width/height
   attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
  }else{ 
   var val = targ[pos];
   // Handle percentage values
   attr[key] = val.slice && val.slice(-1) == '%' ? 
   parseFloat(val) / 100 * max
   : val;
  }
  // Number or 'number'
  if( /^\d+$/.test(attr[key]) )
   // Check the limits
   attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
  // Queueing axes
  if( !i && settings.queue ){
   // Don't waste time animating, if there's no need.
   if( old != attr[key] )
   // Intermediate animation
   animate( settings.onAfterFirst );
   // Don't animate this axis again in the next iteration.
   delete attr[key];
  }
  });
  animate( settings.onAfter );  
  function animate( callback ){
  $elem.animate( attr, duration, settings.easing, callback && function(){
   callback.call(this, target, settings);
  });
  };
 }).end();
 };
 $scrollTo.max = function( elem, axis ){
 var Dim = axis == 'x' ? 'Width' : 'Height',
  scroll = 'scroll'+Dim;
 if( !$(elem).is('html,body') )
  return elem[scroll] - $(elem)[Dim.toLowerCase()]();
 var size = 'client' + Dim,
  html = elem.ownerDocument.documentElement,
  body = elem.ownerDocument.body;
 return Math.max( html[scroll], body[scroll] ) 
  - Math.min( html[size] , body[size] );
 };
 function both( val ){
 return typeof val == 'object' ? val : { top:val, left:val };
 };
})( jQuery );
$(document).ready(function() { 
 $('#mask').css({'height':$('#panel-1').height()}); 
 $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
 $('#panel div').width($('#mask').width());
 $('a[rel=panel]').click(function () {
 var panelheight = $($(this).attr('href')).height();
 $('a[rel=panel]').removeClass('selected');
 $(this).addClass('selected');
 $('#mask').animate({'height':panelheight},{queue:false, duration:500});  
 $('#mask').scrollTo($(this).attr('href'), 800); 
 return false;
 });
});
</script>
<style>
body {
 padding:0;
 margin:0 20px;
 background:#d2e0e5;
 font:12px arial;
}
#scroller-header a {
 text-decoration:none; 
 color:#867863; 
 padding:0 2px;
}
#scroller-header a:hover {
 text-decoration:none; 
 color:#4b412f
}
a.selected {
 text-decoration:underline !important; 
 color:#4b412f !important;
}
#scroller-header {
 background:url(images/header.gif) no-repeat;
 width:277px;
 height:24px;
 padding:35px 0 0 15px;
 font-weight:700;
}
#scroller-body {
 background:url(images/body.gif) no-repeat bottom center;
 width:277px;
 padding-bottom:30px;
}
#mask {
 width:250px;
 overflow:hidden;
 margin:0 auto;
}
#panel {
}
#panel div {
float:left;
}
#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}
#panel ul li.last {
border-bottom:none !important;
}
#panel-1 {
}
#panel-2 {
}
#panel-3 {
}
</style>
</head>
<body>
<h2><a href="#">jQuery Sidebar Sliding Tab Menu Tutorial</a></h2>
<div id="scroller-header">
<a href="#panel-1" rel="panel" class="selected">流行时尚</a>
<a href="#panel-2" rel="panel">网络注释</a>
<a href="#panel-3" rel="panel">历史记录</a>
<a href="#panel-4" rel="panel">网络收藏</a>
</div>
<div id="scroller-body">
<div id="mask">
<div id="panel">
 <div id="panel-1">
 <ul>
 <li>Simple JQuery Image Slide Show with Semi-Transparent Caption</li>
 <li>A Really Simple jQuery Plugin Tutorial</li>
 <li>Create a Simple CSS + Javascript Tooltip with jQuery</li>
 <li>Simple jQuery Modal Window Tutorial</li>
 </ul>
 </div>
 <div id="panel-2">
 <ul>
 <li>30 Javascript Menu Plugins and Scripts</li>
 <li>10+ jQuery photo gallery and slider plugins</li>
 </ul> 
 </div>
 <div id="panel-3">
 <ul>
 <li>CSS and Web Gallery List</li>
 <li class="last">Examples for Inpiration</li>
 </ul> 
 </div>
 <div id="panel-4">
 <ul>
 <li>三水点靠木</li>
 <li>seo</li>
 <li class="last">wordpress</li>
 </ul> 
 </div> 
</div>
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
JavaScript中的Function函数
Aug 27 #Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
javascript中判断json的方法总结
Aug 27 #Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 #Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
怎样使用Python脚本日志功能
2016/08/14 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
django 模型中的计算字段实例
2020/05/19 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
事业单位公务员的职业生涯规划
2014/01/15 职场文书
班级聚会策划书
2014/01/16 职场文书
军训自我鉴定200字
2014/02/13 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年教研室工作总结
2014/12/06 职场文书
民事答辩状范本
2015/05/21 职场文书