Home >Web Front-end >JS Tutorial >jQuery implements tab sliding switching menu with slide effect

jQuery implements tab sliding switching menu with slide effect

php中世界最好的语言Original: 2018-04-26 16:39:071889browse

This time I will bring you jQuery to implement a tab sliding switching menu with a slide effect. What are the precautions for jQuery to implement a tab sliding switching menu with a slide effect. The following is a practical case, let's take a look.

This is a very good TAB sliding switching effect, jQuery tab sliding switching style menu navigation bar with slideshow, click on the text above, and slide to the left or right below to switch, TAB option with animation effect Card.

The screenshot of the running effect is as follows:

The online demonstration address is as follows:

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

The specific code is as follows:

<!DOCTYPE html>
<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>
<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 p').length));
 $('#panel p').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 p {
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>
<p 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>
</p>
<p id="scroller-body">
<p id="mask">
<p id="panel">
 <p 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>
 </p>
 <p id="panel-2">
 <ul>
 <li>30 Javascript Menu Plugins and Scripts</li>
 <li>10+ jQuery photo gallery and slider plugins</li>
 </ul> 
 </p>
 <p id="panel-3">
 <ul>
 <li>CSS and Web Gallery List</li>
 <li class="last">Examples for Inpiration</li>
 </ul> 
 </p>
 <p id="panel-4">
 <ul>
 <li>脚本之家</li>
 <li>seo</li>
 <li class="last">wordpress</li>
 </ul> 
 </p> 
</p>
</p>
</p>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

jQuery implements tab sliding switching menu with slide effect

Related articles