菜单效果


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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
详解Anaconda 的安装教程
2020/09/23 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
社区党员公开承诺书
2014/08/30 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
补充协议书
2015/01/28 职场文书
承诺保证书格式
2015/02/28 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
预备党员介绍人意见
2015/06/01 职场文书
晚会开幕词范文
2016/03/04 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
详解php中流行的rpc框架
2021/05/29 PHP
python的变量和简单数字类型详解
2021/09/15 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python