动感效果的TAB选项卡 jquery 插件

QQ截图20110709155330

 

动感效果的TAB选项卡 jquery 插件 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>无标题文档</title>



<link  href="tab.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="jquery-1.6.2.min.js"></script>



<script type="text/javascript" src="tab.js"></script>



<script type="text/javascript">



$(function() {





 zeng.tab.init();



});



</script>



</head>





<body>



<div class="clearfix" id="hot">



  <div class="main_l tab">



    <div class="main_title clearfix">



      <ul class="fx">



        <li class="on"><a href="#">你是gril</a></li>



        <li class="">我是boy</li>



      </ul>



    </div>



    <div class="t">



      <div class="main_content clearfix">



      我在香格里拉



      </div>



    </div>



    <div class="t none">



      <div class="main_content clearfix">



    呵呵



      </div>



    </div>



  </div>



</div>



</body>



</html>







 


样式：





@charset "utf-8";



/* CSS Document */





#hot {



height: 565px;



overflow: hidden;



}





.clearfix {



display: block;



}



.clearfix::after {



content: ".";



display: block;



height: 0;



clear: both;



visibility: hidden;



}



ul {



    list-style: none outside none;



}



body {



    line-height: 1.5;



}



a, a:link, a:visited {



    color: #333333;



    text-decoration: none;



}



a:hover {



    color: #FF6600;



    text-decoration: none;



}





.main {



    padding: 0 10px 0 167px;



    position: relative;



    width: 823px;



}



.main_l {



    float: left;



    position: relative;



    width: 513px;



}



.main_r {



    float: right;



    position: relative;



    width: 300px;



}



.main_title {



    background: url("images/s.png") no-repeat scroll 0 0 transparent;



    float: left;



    height: 28px;



    overflow: hidden;



}



.main_title ul {



    font-size: 14px;



}



.main_title ul li {



    background: none repeat scroll 0 0 #F1F1F1;



    border-left: 1px solid #FFFFFF;



    border-right: 1px solid #FFFFFF;



    border-top: 3px solid #FFFFFF;



    float: left;



    height: 23px;



    line-height: 23px;



    padding-left: 16px;



    padding-right: 16px;



    padding-top: 1px;



}



.main_title ul .on {



    background: none repeat scroll 0 0 #FFFFFF;



    border-color: #009AD9 #009AD9 #FFFFFF;



    border-style: solid;



    border-width: 4px 1px 1px;



    height: 22px;



    line-height: 22px;



    padding-left: 16px;



    padding-right: 16px;



}



.main_title ul .on a {



    font-weight: 700;



}



.main_title span {



    float: right;



    line-height: 24px;



    padding-right: 10px;



    padding-top: 4px;



}





.main_l .main_title {



    overflow: hidden;



    width: 513px;



}



.main_l .main_content {



    width: 513px;



}







.tab div.t.none {



    display: none;



}



.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li {



    background-color: transparent;



}



.tab .main_title ul.fx li, .tab .main_title ul.fx li.on {



    border-top: 0 none;



    margin-top: -8px;



    padding-top: 0;



}



.tab .main_title ul.fx li.on {



    border-bottom-width: 0;



    border-left-color: transparent;



    border-right-color: transparent;



}



.tab .main_title ul.fx {



    position: relative;



    z-index: 20;



}



.tab .main_title div.animate {



    background-color: #FFFFFF;



    border-color: #009AD9 #009AD9 #FFFFFF;



    border-style: solid;



    border-width: 4px 1px 1px;



    height: 23px;



    position: absolute;



    top: 0;



}




 


 


 


tab选项卡 源代码：


 


/*



 * tab 1.0



 * Date: 2011-07-09 15:29



 * http://zengxiangzhan.cnblogs.com/



 */





var zeng = zeng || {};



zeng.tab = {



    t: null,



    delayTime: 150,



    fx: true,



    tab: function(b) {



        $(b).siblings().removeClass("on");



        $(b).addClass("on");



        var c = $(b).parents(".tab").find("div.t");



        var a = c.eq($(b).index());



        c.addClass("none");



        a.removeClass("none");



        if (this.fx) {



            if ($(b).parent().hasClass("nofx")) {



                return



            }



            $(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({



                left: $(b).position().left



            }, "slow")



        }



    },



    delayTab: function(b, a) {



        clearTimeout(b.t);



        this.t = setTimeout(function() {



            b.tab(a)



        }, this.delayTime)



    },



    init: function() {



        var a = this;



        a.animate();



        if (window.Touch) {



            $(".tab .main_title>ul>li[class!='on']>a").click(function() {



                return false



            })



        }



        $(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() {



            a.delayTab(a, this)



        }, function() {



            clearTimeout(a.t)



        })



    },



    animate: function() {



        if (!this.fx) {



            return



        }



        $(".tab .main_title>ul").each(function() {



            if (!$(this).hasClass("nofx")) {



                $(this).addClass("fx")



            }



        });



        $(".tab .main_title").each(function(a, b) {



            if ($(this).find("ul").hasClass("nofx")) {



                return



            }



            $(b).append("<div class='animate' ></div>");



            $(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left)



        })



    }



};








            

            
posted @ 
2011-07-09 16:07 
曾祥展 
阅读(1738) 
评论(0) 
编辑 
收藏 
举报