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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • 纯CSS打造的导航菜单(附jquery版)

    纯CSS打造的导航菜单(附jquery版)

    方式一:直接编写代码实现 效果如下: 代码如下: 复制代码 代码如下: <html> <head> <title>无需表格的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ m

  • jquery实现简单Tab切换菜单效果

    本文实例为大家分享了jquery Tab切换菜单的实现代码,供大家参考,具体内容如下 实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">导航菜单</a></li> <li><a href="

  • 基于jQuery实现的菜单切换效果

    基于jQuery实现的菜单切换效果

    这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉.这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. HTML 首先建立主菜单,我们借用电商网站常见的商品分类.其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用. <div class="active"> <ul class=&

  • 基于jQuery插件实现环形图标菜单旋转切换特效

    feature.presenter.1.5.css body { margin: 0; font-family: Tahoma; } .feature-presenter { position: absolute; } .feature-presenter-icon { background-color: white; text-align: center; transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95); -we

  • jQuery+CSS实现简单切换菜单示例

    本文实例讲述了jQuery+CSS实现简单切换菜单的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标

  • 7款风格新颖的jQuery/CSS3菜单导航分享

    7款风格新颖的jQuery/CSS3菜单导航分享

    一款优秀的菜单对网站而言是非常重要的,它不仅可以让用户方便地找到想要的信息,而且更让人有一种特殊的用户体验.下面给大家分享7款风格新颖的jQuery/CSS3菜单导航,希望大家会喜欢. 1.CSS3立体飘带状菜单 CSS3立体飘带状菜单,该菜单鼠标滑过时,菜单项向上立体凸起,结合黑色的木质背景,整个菜单显得非常立体生动. 在线演示 /源码下载 2.CSS3个人资料导航菜单 该菜单是用来展示登录的用户信息,包括用户的快捷操作按钮,另外菜单还提供一个个性化的搜索框. 在线演示 /源码下载 3.jQu

  • jQuery实现Tab菜单滚动切换的方法

    jQuery实现Tab菜单滚动切换的方法

    本文实例讲述了jQuery实现Tab菜单滚动切换的方法.分享给大家供大家参考.具体如下: 这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

  • jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

    功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: 复制代码 代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decorat

  • jQuery实现菜单式图片滑动切换

    jQuery实现菜单式图片滑动切换

    jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效. 复制代码 代码如下: $(function(){     // floorCon-slide     $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95})     $(".floorCon-slide .floorConSlideImgNav li.hover").find("span&qu

  • jquery+css+ul模拟列表菜单具体实现思路

    jquery+css+ul模拟列表菜单具体实现思路

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery+css实现的蓝色水平二级导航菜单效果代码

    jQuery+css实现的蓝色水平二级导航菜单效果代码

    本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

随机推荐