<!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=gb2312" />
<title>jquery卷帘门滑动选项卡插件 - 网页模板</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container */
#container{margin:20px auto 40px auto;background-color:#fff;width:970px;}
#container .itemdiv{width:470px;margin:0 0 40px 0;}
#container .itemdiv h2{height:32px;font-size:16px;line-height:24px;}
#container .itemdiv h2 span{color:#ff0000;}
#container .left{float:left;}
#container .right{float:right;}
#container .itemdiv .pre{display:block;width:auto;padding:10px;background-color:#eaeaea;}
</style>
<!--必要样式-->
<link href="css/timetabs.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.timetabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('dl#tabs4').addClass('enabled').timetabs({
defaultIndex: 0,
interval: 2500,
continueOnMouseLeave: true,
animated: 'fade',
animationSpeed: 500
});
$('dl#tabs3').addClass('enabled').timetabs({
defaultIndex: 0,
interval: 2500,
continueOnMouseLeave: true,
animated: 'curtain',
animationSpeed: 500
});
$('dl#tabs2').addClass('enabled').timetabs({
defaultIndex: 0,
interval: 2500,
continueOnMouseLeave: true,
animated: 'slide',
animationSpeed: 500
});
$('dl#tabs1').addClass('enabled').timetabs({
defaultIndex: 0,
interval: 2500,
continueOnMouseLeave: true,
animated: false,
animationSpeed: 500
});
});
</script>
</head>
<body>
<div id="container">
<div class="itemdiv left">
<h2>Animation: <span>fade</span></h2>
<dl class="tabs" id="tabs4">
<dt>Tab 1</dt>
<dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
<dt>Tab 2</dt>
<dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
<dt>Tab 3</dt>
<dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
<dt>Tab 4</dt>
<dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
</dl>
<div class="pre">
$(document).ready(function(){<br />
$('dl').akkordion({<br />
animated: 'fade'<br />
});<br />
});
</div>
</div>
<div class="itemdiv right">
<h2>Animation: <span>curtain</span></h2>
<dl class="tabs" id="tabs3">
<dt>Tab 1</dt>
<dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
<dt>Tab 2</dt>
<dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
<dt>Tab 3</dt>
<dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
<dt>Tab 4</dt>
<dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
</dl>
<div class="pre">
$(document).ready(function(){<br />
$('dl').akkordion({<br />
animated: 'curtain'<br />
});<br />
});
</div>
</div>
<div class="itemdiv left">
<h2>Animation: <span>slide</span></h2>
<dl class="tabs" id="tabs2">
<dt>Tab 1</dt>
<dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
<dt>Tab 2</dt>
<dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
<dt>Tab 3</dt>
<dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
<dt>Tab 4</dt>
<dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
</dl>
<div class="pre">
$(document).ready(function(){<br />
$('dl').akkordion({<br />
animated: 'slide'<br />
});<br />
});
</div>
</div>
<div class="itemdiv right">
<h2>Animation: <span>off</span></h2>
<dl class="tabs" id="tabs1">
<dt>Tab 1</dt>
<dd><img src="images/content/loewe.jpg" width="450" height="278" alt="Galaxy 01" /></dd>
<dt>Tab 2</dt>
<dd><img src="images/content/zebra.jpg" width="450" height="278" alt="Galaxy 02" /></dd>
<dt>Tab 3</dt>
<dd><img src="images/content/giraffe.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
<dt>Tab 4</dt>
<dd><img src="images/content/elefant.jpg" width="450" height="278" alt="Galaxy 03" /></dd>
</dl>
<div class="pre">
$(document).ready(function(){<br />
$('dl').akkordion({<br />
animated: false<br />
});<br />
});
</div>
</div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery卷帘门滑动选项卡插件.zip
版权申诉
126 浏览量
2022-11-21
11:32:21
上传
评论
收藏 295KB ZIP 举报
jquery卷帘门滑动选项卡插件.zip （9个子文件） 
jquery卷帘门滑动选项卡插件 jiaoben1697 css 
timetabs.css 837B images content 
zebra.jpg 59KB elefant.jpg 58KB loewe.jpg 50KB giraffe.jpg 37KB
index.html 6KB js jquery.timetabs.min.js 4KB jquery-1.4.2.min.js 71KB jquery卷帘门滑动选项卡插件.jpg 73KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
