Cette fois, je vais vous proposer jQuery pour implémenter un menu de commutation par onglets avec un effet de diaporama. Quelles sont les précautions pour que jQuery implémente un menu de commutation par onglets avec un effet de diaporama. cas pratique, jetons un coup d'oeil.
Il s'agit d'un très bon effet de commutation coulissante TAB, barre de navigation de menu de style de commutation coulissante d'onglet jQuery avec diaporama, cliquez sur le texte ci-dessus et faites glisser vers la gauche ou la droite en dessous pour basculer, option TAB avec carte d'effet d'animation.
Une capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démonstration en ligne est la suivante :
http://demo .jb51.net/js/2015 /jquery-flash-style-tab-cha-menu-codes/
Les codes spécifiques sont les suivants :
<!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>Copier après la connexion
Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Titres des tables de tri JQuery
Explication détaillée de l'utilisation du plug-in tablesorter (avec étui)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
