非常好玩的滑动门jquery
2013-04-07 16:30
253 查看
html部分
js部分：
test_base.css
tabs.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript" src="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script>
<link href="css/test_base.css" rel="stylesheet" type="text/css" />
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.tabs.js"></script>
</head>
<style type="text/css">
.tabs{
margin:0 auto;
margin-bottom: 20px;
}
</style>
<body>
<div id="tabs2">
<div class="tabs-title">
<div class="tabs-lbg"></div>
<ul class="tabs-list">
<li class="tabs-option">
<span class="tabs-option-lbg"></span>
<span class="tabs-option-text">标题1</span>
<span class="tabs-option-rbg"></span>
</li>
<li class="tabs-option">
<span class="tabs-option-lbg"></span>
<span class="tabs-option-text">标题2</span>
<span class="tabs-option-rbg"></span>
</li>
<li class="tabs-option">
<span class="tabs-option-lbg"></span>
<span class="tabs-option-text">标题3</span>
<span class="tabs-option-rbg"></span>
</li>
</ul>
<div class="tabs-rbg"></div>
<div class="clear"></div>
</div>
<div class="tabs-box">
<div class="fatbox">
<div class="tabs-content">内容1</div>
<div class="tabs-content">内容2</div>
<div class="tabs-content">内容3</div>
<div class="clear"></div>
</div>
</div>
</div>
<script type="text/javascript">
$("#tabs2").tabs({xScroll:true});
</script>
</body>
</html>js部分：
(function($){
$.fn.extend({
"tabs":function(options){
options=$.extend({
_event:0,
index:0,
animateSpeed:500,
tabWidth:500,
tabHeight:200,
listHeight:37,
opacity:false,
xScroll:false,
yScroll:false
},options);
if(!$(this).hasClass("tabs")){
$(this).addClass("tabs")
};
var obj = $(this),
list = $(".tabs-list",obj),
_option = $(".tabs-option",list),
box = $(".tabs-box",obj),
content = $(".tabs-content",box);
var index = options.index,
tabWidth = options.tabWidth,
tabHeight = options.tabHeight,
listHeight = options.listHeight;
obj.css({"width":tabWidth,"height":tabHeight});
list.css("width",tabWidth-8);
box.css({"width":tabWidth-2});
content.css({"width":tabWidth-2,"display":"none"}).eq(index).css("display","block");
_option.eq(index).addClass("selected");
if(options._event==1){
_option.click(function(){
index=_option.index(this);
_animate(index);
});
}else{
_option.mouseenter(function(){
index=_option.index(this);
_animate(index);
});
}
if(options.xScroll){
content.css({"display":"block","float":"left"});
$(".fatbox",box).css({"width":(tabWidth-2)*content.length});
}else if(options.yScroll){
content.css({"display":"block","height":tabHeight-listHeight});
box.css({"height":tabHeight-listHeight-1});
$(".fatbox",box).css({"width":(tabWidth-2),"height":(tabHeight-listHeight-1)*content.length});
}
function _animate(index){
if(options.opacity){
opacityPlay(index);
}else if(options.xScroll){
xScrollPlay(index);
}else if(options.yScroll){
yScrollPlay(index);
}else{
Play(index);
};
};
function Play(index){
_option.removeClass("selected").eq(index).addClass("selected");
content.css("display","none").eq(index).css("display","block");
};
function opacityPlay(index){
_option.removeClass("selected").eq(index).addClass("selected");
if(content.eq(index).css("display")== "none"){
content.css("display","none").eq(index).fadeIn(options.animateSpeed);
}
};
function xScrollPlay(index){
_option.removeClass("selected").eq(index).addClass("selected");
$(".fatbox",box).animate({
marginLeft:-(tabWidth-2)*index
},options.animateSpeed)
}
function yScrollPlay(index){
_option.removeClass("selected").eq(index).addClass("selected");
$(".fatbox",box).animate({
marginTop:-(tabHeight-listHeight)*index
},options.animateSpeed)
}
}
})
})(jQuery)css部分：test_base.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: "宋体";
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
button{
margin: 0px;
padding: 0px;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
body{
background-color:#FFFFFF;
padding-top: 20px;
}
.clear{
clear: both;
}tabs.css
.tabs {
overflow: hidden;
}
/* title */
.tabs .tabs-title {
}
.tabs .tabs-title .tabs-lbg, .tabs .tabs-title .tabs-rbg{
background-image: url(images/tab-list-lrbg.jpg);
height: 37px;
width: 4px;
background-repeat: no-repeat;
background-position: 0px 0px;
float: left;
}
.tabs .tabs-title .tabs-rbg{
background-position: -4px 0px;
}
.tabs .tabs-title .tabs-list{
background-image: url(images/tab-list-bg.jpg);
background-repeat: repeat-x;
height: 37px;
float: left;
}
.tabs .tabs-title .tabs-list .tabs-option {
float: left;
padding-right: 10px;
padding-left: 10px;
padding-top: 6px;
height: 31px;
font-size: 12px;
font-family: "宋体";
line-height: 30px;
cursor:pointer;
}
.tabs .tabs-title .tabs-list .tabs-option .tabs-option-lbg, .tabs .tabs-title .tabs-list .tabs-option .tabs-option-rbg {
height: 31px;
width: 5px;
display: block;
float: left;
}
.tabs .tabs-title .tabs-list .tabs-option .tabs-option-text{
float: left;
height: 31px;
line-height: 31px;
padding-right: 10px;
padding-left: 10px;
}
/* selected */
.tabs .tabs-title .tabs-list .selected .tabs-option-lbg, .tabs .tabs-title .tabs-list .selected .tabs-option-rbg {
background-image: url(images/tab-list-selected.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
.tabs .tabs-title .tabs-list .selected .tabs-option-rbg {
background-position: -6px 0px;
}
.tabs .tabs-title .tabs-list .selected .tabs-option-text{
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dadada;
height: 30px;
line-height: 30px;
}
/* box */
.tabs .tabs-box {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #dadada;
border-bottom-color: #dadada;
border-left-color: #dadada;
overflow: hidden;
}
.tabs .tabs-box .tabs-content {
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 30个创意出色的非常实用的jquery框架插件-(视觉大背景，瀑布流效果)
- 非常有用的40款jQuery 插件推荐（系列二）
- Aptana Studio 3——对jquery智能提示非常强大的工具
- 30个非常流行的提示信息插件（jQuery Tooltip Plugin）
- 12 个非常实用的 jQuery 代码片段
- 10个非常有用的jQuery360度旋转影像插件推荐
- 简洁jQuery滑动门插件
- 25个非常不错的jQuery日历和日期选取插件
- 推荐一个非常好玩的falsh游戏
- 10款非常有效的帮助你设计超酷响应式布局的jQuery插件
- 一款Jquery实现非常实用的返回浏览器顶部特效
- 基于jquery自己写tab滑动门(通用版)
- jQuery中10个非常有用的遍历函数
- jquery写的tab切换效果 非常简单
- 19个非常有用的jQuery图片滑动插件和教程
- jQuery实现的经典滑动门效果
- 40个非常实用的 jQuery 插件和免费教程【下篇】
- 40款非常有用的 jQuery 插件推荐
- 14个非常有用的jquery技巧，注意事项和最佳实践
- 经典滑动门-很漂亮-直接用- 附js和jQuery两版本