动感效果的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 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 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 在线翻译函数代码
2009/05/07 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Javascript 实用小技巧
2010/04/07 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python的常见矩阵运算(小结)
2019/08/07 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
高中的自我鉴定
2013/12/16 职场文书
工程资料员岗位职责
2014/03/10 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技