代码改变世界

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

2011-07-09 16:07  曾祥展  阅读(1642)  评论(0编辑  收藏

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)
        })
    }
};