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


Posted in Javascript onJuly 09, 2011

效果图:
动感效果的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) 
}) 
} 
};

作者:曾祥展
Javascript 相关文章推荐
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
angular多语言配置详解
May 16 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
ReactRouter的实现方法
Jan 25 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 #Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 #Javascript
jquery 选项卡效果 新手代码
Jul 08 #Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php导出excel格式数据问题
2014/03/11 PHP
php分页示例分享
2014/04/30 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
计算机专业毕业生求职信
2014/04/30 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
求职自荐信怎么写
2015/03/04 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
详解Go语言中Get/Post请求测试
2022/06/01 Golang