jQuery实现有幻灯效果tab滑动切换菜单
这次给大家带来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></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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是jQuery实现有幻灯效果tab滑动切换菜单的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题
Apr 03, 2024 am 08:13 AM
你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告
九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿
Mar 28, 2024 am 11:11 AM
说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系
轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便
Apr 23, 2024 am 08:04 AM
一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏
航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩
Mar 28, 2024 pm 03:20 PM
ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，
春日里的精致光影艺术，哈趣 H2 性价比之选
Apr 17, 2024 pm 05:07 PM
随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入
七彩虹隐星 P15 24 评测：颜值性能兼具的硬核全能游戏本
Mar 06, 2024 pm 04:40 PM
在当下科技飞速发展的时代，笔记本电脑已经成为人们日常生活和工作中不可或缺的重要工具。对于那些对性能有高要求的玩家而言，拥有配置强大、性能出色的笔记本电脑才能满足其硬核需求。七彩虹隐星P15笔记本电脑凭借其卓越性能和令人惊艳的设计，成为了未来的引领者，堪称硬核笔记本的典范。七彩虹隐星P1524配备了13代英特尔酷睿i7处理器和RTX4060LaptopGPU，外观采用更时尚的宇宙飞船设计风格，同时在细节表现上也有出色表现。让我们先来了解一下这款笔记本的特点。至高搭载英特尔酷睿i7-13620H处理
真正的一镜走天下 尼克尔 Z 28-400mm f/4-8 VR 镜头上手体验
Mar 28, 2024 pm 02:54 PM
很多摄影爱好者喜欢使用镜头，他们的拍摄需求非常多变，因此在镜头的选择上更倾向于一支比较全能的产品，也就是我们俗称的"一镜走天下"镜头。刚好，现在尼康推出了一支新的产品，尼克尔Z28-400mmf/4-8VR镜头，一支真正的"一镜走天下"镜头。镜头从28mm广角端一直覆盖到400mm长焦端，配备其Z卡口相机，可以轻松拍摄十分丰富的摄影主题，并带来一场丰富的视角变化。今天，我们就通过近期的使用体验，跟大家一起聊聊这支尼克尔Z28-400mmf/4-8VR镜头。尼克尔Z28-400mmf/4-8VR是
屏幕好打游戏才够爽 iQOO Neo9S Pro+ 屏幕简析
Jul 19, 2024 pm 03:53 PM
在当今智能手机市场中，屏幕素质已经成为衡量一款手机综合性能的关键指标之一。iQOO旗下的Neo系列一直致力于为用户提供出色的游戏体验和视觉享受，最新款产品iQOONeo9SPro+更是采用一块"三好护眼电竞屏"，接下来我们就来一起看看这块屏幕的素质有多出色。iQOONeo9SPro+搭载了一块1.5KOLED电竞直屏，支持从1Hz到144Hz的旗舰级LTPO自适应刷新率，意味着在显示静态内容时能够实现超低功耗的待机状态，而在游戏过程中也能智能切换至90Hz至144Hz的动态高
