菜单效果


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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
微信小程序实现拍照和相册选取图片
May 09 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
javascript学习网址备忘
2007/05/29 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python批量获取html内body内容的实例
2019/01/02 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python实现大文件分割与合并
2019/07/22 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Django多数据库联用实现方法解析
2020/11/12 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
三八节活动主持词
2015/07/04 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书