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!
Recommended reading:
Detailed explanation of using the tablesorter plug-in (with case)
The above is the detailed content of jQuery implements tab sliding switching menu with slide effect. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
