Rumah >hujung hadapan web >tutorial js >菜单效果_javascript技巧

菜单效果_javascript技巧

WBOY
WBOYasal
2016-05-16 19:25:16874semak imbas
复制代码 代码如下:

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn