jQuery网页选项卡插件rTabs用法实例分析_jquery

这里介绍jQuery网页选项卡插件rTabs用法，一共演示了4种TAB选项卡样式，第一种：默认样式：自动运行、无动画效果、Hover事件；第二种：自动运行、向上滚动、支持Hover事件的TAB选项卡菜单；第三种：自动运行、渐入淡出、支持Hover事件的选项卡；第四种：自动运行、向左滚动、点击事件的网页选项卡，选一个你喜欢的放在你的网站吧。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-rTabs-web-tab-cha-codes/

具体代码如下：

(function($){
 $.fn.rTabs = function(options){
 //默认值
 var defaultVal = {
 btnClass:'.j-tab-nav', /*按钮的父级Class*/
 conClass:'.j-tab-con', /*内容的父级Class*/
 bind:'hover', /*事件参数 click,hover*/
 animation:'0', /*动画方向 left,up,fadein,0 为无动画*/
 speed:300, /*动画运动速度*/
 delay:200, /*Tab延迟速度*/
 auto:true, /*是否开启自动运行 true,false*/
 autoSpeed:3000 /*自动运行速度*/
 };
 //全局变量
 var obj = $.extend(defaultVal, options),
 evt = obj.bind,
 btn = $(this).find(obj.btnClass),
 con = $(this).find(obj.conClass),
 anim = obj.animation,
 conWidth = con.width(),
 conHeight = con.height(),
 len = con.children().length,
 sw = len * conWidth,
 sh = len * conHeight,
 i = 0,
 len,t,timer;
 return this.each(function(){
 //判断动画方向
 function judgeAnim(){
 var w = i * conWidth,
 h = i * conHeight;
 btn.children().removeClass('current').eq(i).addClass('current');
 switch(anim){
 case '0':
 con.children().hide().eq(i).show();
 break;
 case 'left':
 con.css({position:'absolute',width:sw}).children().css({float:'left',display:'block'}).end().stop().animate({left:-w},obj.speed);
 break;
 case 'up':
 con.css({position:'absolute',height:sh}).children().css({display:'block'}).end().stop().animate({top:-h},obj.speed);
 break;
 case 'fadein':
 con.children().hide().eq(i).fadeIn();
 break;
 }
 }
 //判断事件类型
 if(evt == "hover"){
 btn.children().hover(function(){
 var j = $(this).index();
 function s(){
 i = j;
 judgeAnim();
 }
 timer=setTimeout(s,obj.delay);
 }, function(){
 clearTimeout(timer);
 })
 }else{
 btn.children().bind(evt,function(){
 i = $(this).index();
 judgeAnim();
 })
 }
 //自动运行
 function startRun(){
 t = setInterval(function(){
 i++;
 if(i>=len){
 switch(anim){
 case 'left':
 con.stop().css({left:conWidth});
 break;
 case 'up':
 con.stop().css({top:conHeight});
 } 
 i=0;
 }
 judgeAnim();
 },obj.autoSpeed)
 }
 //如果自动运行开启，调用自动运行函数
 if(obj.auto){
 $(this).hover(function(){
 clearInterval(t);
 },function(){
 startRun();
 })
 startRun();
 }
 })
 }
})(jQuery);

希望本文所述对大家的jquery程序设计有所帮助。