菜单效果


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 相关文章推荐
解密效果
Jun 23 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
vue-router单页面路由
Jun 17 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
对Python 数组的切片操作详解
2018/07/02 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
环境工程大学生个人的自我评价
2013/10/08 职场文书
股份转让协议书
2014/04/12 职场文书
服务承诺书范文
2014/05/19 职场文书
年度考核表个人总结
2015/03/06 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python