菜单效果


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 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
Boostrap入门准备之border box
May 09 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
简单的渐变轮播插件
Jan 12 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
ES6 解构赋值的原理及运用
May 25 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
Zend Framework入门知识点小结
2016/03/19 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python 同时运行多个程序的实例
2019/01/07 Python
python图像和办公文档处理总结
2019/05/28 Python
python matplotlib拟合直线的实现
2019/11/19 Python
英国工具中心:UK Tool Centre
2017/07/10 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
企业授权委托书范本
2014/04/02 职场文书
淘宝客服工作职责
2014/07/11 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
查摆问题整改措施
2014/10/24 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
Spring 使用注解开发
2022/05/20 Java/Android