动感效果的TAB选项卡 jquery 插件
动感效果的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)})}};
