非常好玩的滑动门jquery

思念是荒芜的梦

发布于 2026-01-09 12:58:47

1050

html部分

<!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 {
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-09，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery