菜单效果


Posted in Javascript onOctober 14, 2006
<SCRIPT language=JavaScript> 
<!-- 
 var layerTop=15;       //菜单顶边距 
 var layerLeft=20;      //菜单左边距 
 var layerWidth=160;    //菜单总宽 
 var titleHeight=26;    //标题栏高度 
 var contentHeight=150; //内容区高度 
 var stepNo=10;         //移动步数,数值越大移动越慢  var itemNo=0;runtimes=0; 
 document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #183789;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('<img src="../images/guanli.gif"><br><b><font color="#ffffff"><a href="admin_index.asp" target=_top><font color="#ffffff">管理首页</font></a> | <a href="logout.asp" target="_top"><font color="#ffffff">退出</font></a></font></b>','<DIV STYLE="PADDING-LEFT:15px">? <a href="zhuangtai.asp" target="right">商铺状态设置</a><br>? <a href="admin_right.asp?action=modify" target="right">管理我的商品</a> | <a href="admin_right.asp?action=addclass" target="right">添加</a><BR>? <a href="admin_right.asp?action=glnews" target="right">管理我的新闻</a> | <a href="admin_right.asp?action=addnews" target="right">添加</a><BR>? <a href="admin_right.asp?action=fk" target="right">查看我的留言</a><br>? <a href="editdingdan.asp" target="right">网上订单</a><br>?  <a href="quebook.asp" target="right">缺货提醒</a><br></DIV>'); 
 addItem('<b><font color="#ffffff">信息修改</font></b>','<DIV STYLE="PADDING-LEFT:15px">? <a href="admin_right.asp?action=fkfs" target="right">付款方式修改</a><BR>? <a href="admin_right.asp?action=ps" target="right">配送说明修改</a><BR>? <a href="admin_right.asp?action=shjintr" target="right">商家简介修改</a><BR>? <a href="admin_right.asp?action=gong" target="right">修改我的公告</a><br></DIV>'); 
 addItem('<b><font color="#ffffff">商家设置</font></b>','<DIV STYLE="PADDING-LEFT:15px">? <a href="admin_right.asp?action=myziliao" target="right">商家资料修改</a><br>? <a href="admin_right.asp?action=pass" target="right">商家密码修改</a><br>? <a href="admin_right.asp?action=url" target="right">商家二级域名</a><br>? <a href="admin_right.asp?action=logo" target="right">修改商家LOGO</a><br>? <a href="tjbb.asp" target="right">商品销售统计</a><br></DIV>'); 
 addItem('<b><font color="#ffffff">其他设置</font></b>','<DIV STYLE="PADDING-LEFT:15px">?  <a href="shjclass.asp" target="right">商品分类管理</a><br>? <a href="tuangou/index.asp" target="right">团购订单管理</a><br>? <a href="banner.asp" target="right">首页banner管理</a><br></DIV>'); 
 addItem('<b><font color="#ffffff">商家认证</font></b>','<DIV STYLE="PADDING-LEFT:15px">? <a href="../help3.asp#2" target="right">营业执照认证</a><br>? <a href="../help3.asp#7" target="right">电话认证</a><br>? 钻石认证<br>? VIP认证<br></DIV>'); 
 addItem('<b><font color="#ffffff">帮助信息</font></b>','<DIV STYLE="PADDING-LEFT:15px">? <a href="../help2.asp#2" target="right">管理新闻帮助</a><br>? <a href="../help2.asp#7" target="right">信息修改帮助</a><br>? <a href="../help2.asp#6" target="right">缺货信息帮助</a><br>? <a href="../help2.asp" target="right">商家操作帮助</a><br></DIV>'); 
 addItem('<b><font color="#ffffff">版权信息</font></b>','<DIV STYLE="PADDING-LEFT:15px">版权所有<BR> ® 东莞商城<BR>业务联系<BR>QQ:234252308<br>24小时客服<br>+0769-21252157<br><a href="mailto:web@vcidc.com ">web#vcidc.com </a></DIV>'); 
 document.write('</span>') 
 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<=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>
Javascript 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
Using the TextRange Object
Oct 14 #Javascript
使用TextRange获取输入框中光标的位
Oct 14 #Javascript
JS代码格式化和语法着色V2
Oct 14 #Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 #Javascript
动态加载js文件 document.createElement
Oct 14 #Javascript
不错的asp中显示新闻的功能
Oct 13 #Javascript
简单JS代码压缩器
Oct 12 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php中define用法实例
2015/07/30 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
python中常用的九种预处理方法分享
2016/09/11 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
初中科学教学反思
2014/01/21 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
毕业设计工作总结
2015/08/14 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server