php tab效果,jQuery_动感效果的TAB选项卡jquery 插件，效果图:动感效果的TAB选项卡 jq - phpStudy...

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

效果图:

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

复制代码 代码如下:

无标题文档

$(function() {

zeng.tab.init();

});

• 你是gril
• 我是boy

我在香格里拉

呵呵

样式：

复制代码 代码如下:

@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("

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

})

}

};

作者：曾祥展相关阅读:

可以有效提升操作速度的Win 7设置技巧

用vbs列出注册表中 Run 项中的所有项目

重定向符(、)的使用

Microsoft Ajax Library异步获取页面并显示

用PAM认证加强Linux服务器安全

保护系统从IIS　建立高安全性能服务器

ASP.NET(AJAX+JSON)实现对象调用

Flex中的MySQL管理(1)

Oracle 10g各个帐号的访问权限、登录路径、监控状态命令查询等等

PHP新手上路(十三)

Apache和IIS未退Xitami已来

Linux系统下创建DBCA报错问题的解决

英文教程：鼠标悬停(hover)效果

javascript 错误“缺少十六进制数字”的处理