jQuery實作有幻燈效果tab滑動切換選單-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作有幻燈效果tab滑動切換選單

php中世界最好的语言

Apr 26, 2018 pm 04:39 PM

jquery效果滑動

這次帶給大家jQuery實作有幻燈效果tab滑動切換選單，jQuery實作有幻燈效果tab滑動切換選單的注意事項有哪些，下面就是實戰案例，一起來看一下。

這是一款很不錯的TAB滑動切換效果，jQuery帶幻燈的tab滑動切換風格選單導航條，點擊上方的文字，下邊就向左或向右滑動切換，動畫效果的TAB選項卡。

運行效果截圖如下：

線上示範網址如下：

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

具體程式碼如下：

nbsp;html>

<meta>
<title></title>
<script></script>
<script>
;(function( $ ){
 var $scrollTo = $.scrollTo = function( target, duration, settings ){
 $(window).scrollTo( target, duration, settings );
 };
 $scrollTo.defaults = {
 axis:&#39;xy&#39;,
 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(), [&#39;iframe&#39;,&#39;#document&#39;,&#39;html&#39;,&#39;body&#39;] ) != -1;
  if( !isWin )
   return elem;
  var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
  return $.browser.safari || doc.compatMode == &#39;BackCompat&#39; ?
  doc.body : 
  doc.documentElement;
 });
 };
 $.fn.scrollTo = function( target, duration, settings ){
 if( typeof duration == &#39;object&#39; ){
  settings = duration;
  duration = 0;
 }
 if( typeof settings == &#39;function&#39; )
  settings = { onAfter:settings }; 
 if( target == &#39;max&#39; )
  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(&#39;html,body&#39;);
  switch( typeof targ ){
  // A number will pass the regex
  case &#39;number&#39;:
  case &#39;string&#39;:
   if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
   targ = both( targ );
   // We are done
   break;
   }
   // Relative selector, no break!
   targ = $(targ,this);
  case &#39;object&#39;:
   // DOMElement / jQuery
   if( targ.is || targ.style )
   // Get the real position of the target 
   toff = (targ = $(targ)).offset();
  }
  $.each( settings.axis.split(&#39;&#39;), function( i, axis ){
  var Pos = axis == &#39;x&#39; ? &#39;Left&#39; : &#39;Top&#39;,
   pos = Pos.toLowerCase(),
   key = &#39;scroll&#39; + 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&#39;s a dom element, reduce the margin
   if( settings.margin ){
   attr[key] -= parseInt(targ.css(&#39;margin&#39;+Pos)) || 0;
   attr[key] -= parseInt(targ.css(&#39;border&#39;+Pos+&#39;Width&#39;)) || 0;
   }
   attr[key] += settings.offset[pos] || 0;
   if( settings.over[pos] )
   // Scroll to a fraction of its width/height
   attr[key] += targ[axis==&#39;x&#39;?&#39;width&#39;:&#39;height&#39;]() * settings.over[pos];
  }else{ 
   var val = targ[pos];
   // Handle percentage values
   attr[key] = val.slice && val.slice(-1) == &#39;%&#39; ? 
   parseFloat(val) / 100 * max
   : val;
  }
  // Number or &#39;number&#39;
  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&#39;t waste time animating, if there&#39;s no need.
   if( old != attr[key] )
   // Intermediate animation
   animate( settings.onAfterFirst );
   // Don&#39;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 == &#39;x&#39; ? &#39;Width&#39; : &#39;Height&#39;,
  scroll = &#39;scroll&#39;+Dim;
 if( !$(elem).is(&#39;html,body&#39;) )
  return elem[scroll] - $(elem)[Dim.toLowerCase()]();
 var size = &#39;client&#39; + 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 == &#39;object&#39; ? val : { top:val, left:val };
 };
})( jQuery );
$(document).ready(function() { 
 $(&#39;#mask&#39;).css({&#39;height&#39;:$(&#39;#panel-1&#39;).height()}); 
 $(&#39;#panel&#39;).width(parseInt($(&#39;#mask&#39;).width() * $(&#39;#panel p&#39;).length));
 $(&#39;#panel p&#39;).width($(&#39;#mask&#39;).width());
 $(&#39;a[rel=panel]&#39;).click(function () {
 var panelheight = $($(this).attr(&#39;href&#39;)).height();
 $(&#39;a[rel=panel]&#39;).removeClass(&#39;selected&#39;);
 $(this).addClass(&#39;selected&#39;);
 $(&#39;#mask&#39;).animate({&#39;height&#39;:panelheight},{queue:false, duration:500});  
 $(&#39;#mask&#39;).scrollTo($(this).attr(&#39;href&#39;), 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>


<h2 id="a-jQuery-Sidebar-Sliding-Tab-Menu-Tutorial-a"><a>jQuery Sidebar Sliding Tab Menu Tutorial</a></h2>
<p>
<a>流行时尚</a>
<a>网络注释</a>
<a>历史记录</a>
<a>网络收藏</a>
</p>
<p>
</p><p>
</p><p>
 </p><p>
 </p>