编程
您现在的位置:首页 >> 编程

滑动门效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

<title>滑动门效果</title>

<style type="text/css">

<!--

body{ font:12px "宋体"; text-align:center;}

a:link{ color:#00F; text-decoration:none;}

a:visited { color: #00F; text-decoration:none;}

a:hover { color: #c00; text-decoration:underline;}

ul{ list-style:none;}

/*选项卡*/

#Tab{width:460px;margin:0px;padding:0px;margin:0 auto;}

/*菜单class*/

.Menubox {width:100%;background:#99CCFF;height:32px;line-height:32px;}

.Menubox ul{margin:0px;padding:0px;}

.Menubox li{ float:left; display:block; cursor:pointer; width:114px; color: #666666;}

.Menubox li.hover{ padding:0px; width:116px; border:1px solid #A8C29F; background:#FFF;color: #666666;height:32px;line-height:32px;}

.Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:left; padding-top:8px; }

-->

</style>

</head>

<body>

<br><br>

<div id="Tab">

<div class="Menubox">

<ul>

   <li id="one0" onMouseover="setTab('one',0,4)"  class="hover">选项卡1</li>

   <li id="one1" onMouseover="setTab('one',1,4)" >选项卡2</li>

   <li id="one2" onMouseover="setTab('one',2,4)">选项卡3</li>   

   <li id="one3" onMouseover="setTab('one',3,4)">选项卡4</li>

</ul>

</div>

 <div class="Contentbox">  

   <div id="con_one_0" class="hover">函数标签或页面1</div>

   <div id="con_one_1" style="display:none">函数标签或页面2</div>

   <div id="con_one_2" style="display:none">函数标签或页面3</div>

   <div id="con_one_3" style="display:none">函数标签或页面4</div> 

 </div>

</div>

<!--onMouseover改为onclick为点击效果,AutoPlay函数为自动播放选项卡,不需用可以删除该函数和Tab.onmouseout = function(){AutoPlay()}//-->

<script>

function setTab(name,cursel,n){

 for(var i=0;i<n;i++){

  var menu=document.getElementById(name+i);

  var con=document.getElementById("con_"+name+"_"+i);

  menu.className=i==cursel?"hover":"";

  con.style.display=i==cursel?"block":"none";

 }

}

var num=0;

var AutoPlayObj=null;

function d()

{

    setTab('one',num%4,4);

num++;

}

function AutoPlay()

{

clearInterval(AutoPlayObj);

AutoPlayObj=setInterval('d()',2000)

};

AutoPlay();

var Tab = document.getElementById("Tab");

Tab.onmouseover = function (){clearInterval(AutoPlayObj)}

Tab.onmouseout = function(){AutoPlay()}

</script>

</body>

</html>

 相关文章