欢迎光临
我们一直在努力

模仿OUTLOOK的菜单-ASP教程,客户端相关

建站超值云服务器,限时71元/月

<head>

<style type="text/css">

.titlestyle{

background-color:#3366cc;color:#ffffff;border-top:1px solid #ffffff;font-size:9pt;cursor:hand;

}

.contentstyle{

background-color:#efefef;color:blue;font-size:9pt;

}

a{

color:blue;

}

body{

font-size:9pt;

}

</style>

</head>

<body>

<script language="javascript">

<!–

var layertop=20; //菜单顶边距

var layerleft=30; //菜单左边距

var layerwidth=140; //菜单总宽

var titleheight=20; //标题栏高度

var contentheight=200; //内容区高度

var stepno=10; //移动步数,数值越大移动越慢

var itemno=0;runtimes=0;

document.write(<span id=itemslayer style="position:absolute;overflow:hidden;border:1px solid #efefef;left:+layerleft+;top:+layertop+;width:+layerwidth+;">);

function additem(itemtitle,itemcontent){

itemhtml=<div id=item+itemno+ itemindex=+itemno+ style="position:relative;left:0;top:+(-contentheight*itemno)+;width:+layerwidth+;"><table width=100% cellspacing="0" cellpadding="0">+

<tr><td height=+titleheight+ onclick=changeitem(+itemno+) class="titlestyle" align=center>+itemtitle+</td></tr>+

<tr><td height=+contentheight+ class="contentstyle">+itemcontent+</td></tr></table></div>;

document.write(itemhtml);

itemno++;

}

//添加菜单标题和内容,可任意多项,注意格式:

additem(欢迎,<br>  www.cnbruce.com);

additem(网页专区,<center><a href="#">网页工具</a> <br><br><a href="#">技术平台</a> <br><br><a href="#">设计理念</a> <br><br><a href="#">更多</a></center>);

additem(美工教室,<center><a href="#">平面设计 </a> <br><br><a href="#">三维空间</a> <br><br><a href="#">设计基础</a> <br><br><a href="#">更多..</a></center>);

additem(flash,<center><a href="#">基础教程</a> <br><br><a href="#">技巧运用</a> <br><br><a href="#">实例剖析</a> <br><br><a href="#">更多..</a></center>);

additem(多媒体,<center><a href="#">director</a> <br><br><a href="#">authorware</a> <br><br><a href="#">更多..</a></center>);

additem(精品赏析,<center><a href="#">设计精品</a></center>);

document.write(</span>)

document.all.itemslayer.style.height=itemno*titleheight+contentheight;

toitemindex=itemno-1;onitemindex=itemno-1;

function changeitem(clickitemindex){

toitemindex=clickitemindex;

if(toitemindex-onitemindex>0) moveup(); else movedown();

runtimes++;

if(runtimes>=stepno){

onitemindex=toitemindex;

runtimes=0;}

else

settimeout("changeitem(toitemindex)",10);

}

function moveup(){

for(i=onitemindex+1;i<=toitemindex;i++)

eval(document.all.item+i+.style.top=parseint(document.all.item+i+.style.top)-contentheight/stepno;);

}

function movedown(){

for(i=onitemindex;i>toitemindex;i–)

eval(document.all.item+i+.style.top=parseint(document.all.item+i+.style.top)+contentheight/stepno;);

}

changeitem(0);

//–>

</script>

</body>

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 模仿OUTLOOK的菜单-ASP教程,客户端相关
分享到: 更多 (0)