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

前端技术 2023/08/31 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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>phpstudy</li>
 <li>seo</li>
 <li class=\"last\">wordpress</li>
 </ul> 
 </div> 
</div>
</div>
</div>
</body>
</html>

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

本文地址：https://www.stayed.cn/item/942

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案