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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
vuex 的简单使用
Mar 22 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 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的十大要点(上)
2009/02/04 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php 删除cookie方法详解
2014/12/01 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
说一说Python logging
2016/04/15 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
C语言开发工程师测试题
2016/12/20 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
整改落实自查报告
2014/11/05 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
Python实现排序方法常见的四种
2021/07/15 Python