Heim >Web-Frontend >js-Tutorial >菜单效果_javascript技巧

菜单效果_javascript技巧

WBOY
WBOYOriginal
2016-05-16 19:25:16878Durchsuche
复制代码 代码如下:

<script> <BR><!-- <BR> var layerTop=15; //菜单顶边距 <BR> var layerLeft=20; //菜单左边距 <BR> var layerWidth=160; //菜单总宽 <BR> var titleHeight=26; //标题栏高度 <BR> var contentHeight=150; //内容区高度 <BR> var stepNo=10; //移动步数,数值越大移动越慢 <br><br> var itemNo=0;runtimes=0; <BR> document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #183789;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">'); <br><br> function addItem(itemTitle,itemContent){ <BR> itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+ <BR> '<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+''+ <BR> '<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</script>
';
   document.write(itemHTML);
   itemNo++;
 }
 //添加菜单标题和内容,可任意多项,注意格式:
 addItem('菜单效果_javascript技巧
管理首页 | 退出','
☉ 商铺状态设置
☉ 管理我的商品 | 添加
☉ 管理我的新闻 | 添加
☉ 查看我的留言
☉ 网上订单
☉  缺货提醒
');
 addItem('信息修改','
☉ 付款方式修改
☉ 配送说明修改
☉ 商家简介修改
☉ 修改我的公告
');
 addItem('商家设置','
☉ 商家资料修改
☉ 商家密码修改
☉ 商家二级域名
☉ 修改商家LOGO
☉ 商品销售统计
');
 addItem('其他设置','
☉  商品分类管理
☉ 团购订单管理
☉ 首页banner管理
');

 addItem('商家认证','
☉ 营业执照认证
☉ 电话认证
☉ 钻石认证
☉ VIP认证
');
 addItem('帮助信息','
☉ 管理新闻帮助
☉ 信息修改帮助
☉ 缺货信息帮助
☉ 商家操作帮助
');
 addItem('版权信息','
版权所有
 ® 东莞商城
业务联系
QQ:234252308
24小时客服
+0769-21252157
web#vcidc.com 
');
 document.write('')
 document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight+38;

 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     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);
//-->

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn