div+CSS滑动门特效
滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“<li class="sd02" id="m05">滑动门</li>”、“<div id="c05" class="hidden"> 第五层内容 </div>”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
margin:0px;
padding:0px;
font-size:12px;
}
ul, li {
margin:0px;
padding:0px;
}
li {
list-style-type:none;
}
h1 {
margin:10px;
padding-right:10px;
padding-bottom:5px;
border-bottom:1px dotted #ccc;
}
.cont {
padding:10px;
}
.hidden {
display:none;
}
.scrolldoorFrame {
width:400px;
overflow:hidden;
}
.scrollUl {
width:400px;
border-bottom:1px solid #CCC;
overflow:hidden;
height:35px;
}
.scrollUl li {
float:left;
background-color: #f6f6f6;
width: 80px;
text-align: center;
}
.bor03 {
border:1px solid #ccc;
border-top-width:0px;
}
.sd01 {
cursor:pointer;
border:1px solid #CCC;
background:#FFF;
margin:5px;
padding:2px;
font-weight:bold;
}
.sd02 {
cursor:pointer;
border:0px solid #CCC;
margin:5px;
padding:2px;
}
#tab01 {
position:relative;
width:200px;
border:solid #ccc;
border-width:0 1px 1px;
}
#tab01 h4 {
height:18px;
line-height:18px;
border:solid #ccc;
border-width:1px 0;
margin-bottom:-1px;
text-align:center;
background:#f6f6f6;
cursor:pointer;
}
#tab01 h4.up {
color:#c00;
}
#tab01 ol {
display:none;
height:54px;
padding:5px;
color:#666;
}
#tab01 ol.up {
display:block;
}
#tab02 {
position:relative;
width:100px;
}
#tab02 h3 {
position:relative;
z-index:1;
height:16px;
padding-top:4px;
margin-bottom:-1px;
border:solid #ccc;
border-width:1px 0 1px 1px;
text-align:center;
font-family:宋体;
background:#eee;
cursor:pointer;
}
#tab02 h3.up {
z-index:3;
color:#c00;
background:#fff;
}
#tab02 div.tab {
display:none;
position:absolute;
left:99px;
top:0;
z-index:2;
width:300px;
height:200px;
padding:5px;
border:solid 1px #ccc;
color:#666;
}
#tab02 div.tab.up {
display:block;
}
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
}
ul, li {
}
li {
}
h1 {
}
.cont {
}
.hidden {
}
.scrolldoorFrame {
}
.scrollUl {
}
.scrollUl li {
}
.bor03 {
}
.sd01 {
}
.sd02 {
}
#tab01 {
}
#tab01 h4 {
}
#tab01 h4.up {
}
#tab01 ol {
}
#tab01 ol.up {
}
#tab02 {
}
#tab02 h3 {
}
#tab02 h3.up {
}
#tab02 div.tab {
}
#tab02 div.tab.up {
}
-->
</style>
</head>
<body>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="m01">滑动门</li>
<li class="sd02" id="m02">滑动门</li>
<li class="sd02" id="m03">滑动门</li>
<li class="sd02" id="m04">滑动门</li>
<li class="sd02" id="m05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="c01"> 第一层内容 </div>
<div id="c02" class="hidden"> 第二层内容 </div>
<div id="c03" class="hidden"> 第三层内容 </div>
<div id="c04" class="hidden"> 第四层内容 </div>
<div id="c05" class="hidden"> 第五层内容 </div>
</div>
</div>
<script type="text/javascript">
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementByIdx(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02");
SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");
}
</script>
</style>
</head>
<body>
<div class="preview">
<script type="text/javascript">
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
$ : function(oid){
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02");
SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");
}
</script>
<br />
<div id="tab01">
<h4>首页</h4>
<ol class="pr">
<li>嘿嘿，无视容器原始class值。</li>
</ol>
<h4 class="box">测试</h4>
<ol>
<li>继续无视h3原始class值。</li>
</ol>
<h4>无聊</h4>
<ol>
<li>h3没有值也可以～</li>
</ol>
<h4 class="bb">傻蛋</h4>
<ol>
<li>div没有值一样可以～</li>
</ol>
</div>
<br />
<div id="tab02">
<h3>首页</h3>
<div class="tab">
<p>嘿嘿，无视h3原始class值。</p>
</div>
<h3>测试</h3>
<div class="tab wushi">
<p>继续无视div原始class值。</p>
</div>
<h3>无聊</h3>
<div class="tab">
<p>h3没有值也可以～</p>
</div>
<h3 class="box">傻蛋</h3>
<div class="tab tab123">
<p>class值相似一样也可以～</p>
<div>
<p>指定class后，即时再多一个div也行。</p>
</div>
</div>
</div>
<script type="text/javascript">
function Pid(id,tag){
if(!tag){
return document.getElementByIdx(id);
}
else{
return document.getElementByIdx(id).getElementsByTagName_r(tag);
}
}
<div id="tab01">
</div>
<br />
<div id="tab02">
</div>
<script type="text/javascript">
function Pid(id,tag){
}
function tab(id,hx,box,iClass,s,pr){
var hxs=Pid(id,hx);
var boxs=Pid(id,box);
if(!iClass){ // 如果不指定class，则：
boxsClass=boxs; // 直接使用box作为容器
}
else{ // 如果指定class，则：
var boxsClass = [];
for(i=0;i<boxs.length;i++){
if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
boxsClass.push(boxs[i]);
}
}
}
if(!pr){ // 如果不指定预展开容器，则：
go_to(0); // 默认展开序列
yy();
}
else {
go_to(pr);
yy();
}
function yy(){
for(var i=0;i<hxs.length;i++){
hxs[i].temp=i;
if(!s){// 如果不指定事件，则：
s="onmouseover"; // 使用默认事件
hxs[i][s]=function(){
go_to(this.temp);
}
}
else{
hxs[i][s]=function(){
go_to(this.temp);
}
}
}
}
function go_to(pr){
for(var i=0;i<hxs.length;i++){
if(!hxs[i].tmpClass){
hxs[i].tmpClass=hxs[i].className+=" ";
boxsClass[i].tmpClass=boxsClass[i].className+=" ";
}
if(pr==i){
hxs[i].className+=" up"; // 展开状态：标题
boxsClass[i].className+=" up"; // 展开状态：容器
}
else {
hxs[i].className=hxs[i].tmpClass;
boxsClass[i].className=boxsClass[i].tmpClass;
}
}
}
}
tab("tab01","h3","div","","onclick",2); tab("tab01","h4","ol");tab("tab02","h3","div","tab");
//-->
</script>
</body>
</html>
}
tab("tab01","h3","div","","onclick",2); tab("tab01","h4","ol");tab("tab02","h3","div","tab");
//-->
</script>
</body>
</html>
浙公网安备 33010602011771号