菜单效果


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实现自动刷新简历
May 10 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
JS快速实现简单计算器
Apr 08 Javascript
JavaScript实现移动端弹窗后禁止滚动
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
星际玩家的三大定律
2020/03/04 星际争霸
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
Javascript实现的分页函数
2007/02/07 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python对数组进行反转的方法
2015/05/20 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Django实现基于类的分页功能
2019/10/31 Python
Python生成词云的实现代码
2020/01/14 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
企业业务员岗位职责
2014/03/14 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
小学生暑假安全保证书
2015/07/13 职场文书