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>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 regexcase "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 targettoff = （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 axesif（ ！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>脚本之家</li> <li>seo</li> <li class="last">wordpress</li> </ul></div> </div></div></div></body></html>
希望本文所述对大家的jquery程序设计有所帮助。