菜单效果


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 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue动画效果实现方法示例
Mar 18 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
删除无限级目录与文件代码共享
2006/07/12 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
《孔子拜师》教学反思
2014/02/24 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技