菜单效果


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 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
Angularjs 基础入门
Dec 26 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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/04 无线电
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
python开发之函数定义实例分析
2015/11/12 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
迟到检讨书5000字
2014/01/31 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
创先争优个人总结
2015/03/04 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers
Python中npy和mat文件的保存与读取
2022/04/24 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL