JS实现新浪博客左侧的Blog管理菜单效果代码


Posted in Javascript onOctober 22, 2015

本文实例讲述了JS实现新浪博客左侧的Blog管理菜单效果代码。分享给大家供大家参考,具体如下:

这里介绍新浪博客左侧的Blog管理菜单,我们变通一下,如果你在设计程序,那么本款菜单用到后台管理中想必应该很合适吧,图片是调用新浪的,用了比较多的图片,你用的时候最好是下载到本地,以免新浪哪天改版了,你就傻了。

运行效果截图如下:

JS实现新浪博客左侧的Blog管理菜单效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新浪博客左侧的管理菜单</title>
<style type="text/css">
<!--
body{margin:0;padding:0;background:url("images/bg.gif")}
body, td{font-size:12px}
.menu_box_pad{background:#fdf9d5;padding:0 2px 2px 2px}
.menu_box{border-top:1px solid #ababab;border-left:1px solid #ababab;border-right:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6}
.menu_box th{background:url('images/menu_list_icon.gif') no-repeat center;line-height:22px;width:10px} 
.menu_box td{background:url('images/menu_list_split.gif') no-repeat left bottom;line-height:20px}
.menu_box a{text-decoration:none;color:#000}
.menu_box a:hover{text-decoration:underline}
.hand{cursor:hand;cursor:pointer}
.ctrl_menu{border-left:1px solid #767676;border-bottom:1px solid #767676;border-right:1px solid #767676;background:#ffcf60}
.ctrl_menu_title{padding-left:15px;font-weight:bold;line-height:25px}
.ctrl_menu_title_bg{background:url('images/menu_title_bg.gif')}
.top_bg{background:url("images/top_bg.gif")}
.logo_bg{background:url("images/logo_bg.gif")}
#top_nav_menu {color:#fff}
#top_nav_menu a{text-decoration:none;color:#fff}
#top_nav_menu a:hover{text-decoration:underline;color:#ff6}
-->
</style>
<script>
function $(_sId){
 return document.getElementById(_sId);
}
function exist(_sId){
 var oObj = $(_sId);
 return oObj != null ? oObj : false;
}
function dw(_sTxt){
 document.write(_sTxt);
}
function hide(_sId){
 $(_sId).style.display = $(_sId).style.display == "none" ? "" : "none";
}
function onlyShow(_sId, _iNum, _sPic, _sTxt1, _sTxt2){
 var i = 0;
 var oCurr = exist(_sId + i);
 while(oCurr){
  oCurr.style.display = "none";
  $(_sPic + i).src = _sTxt2;
  i++;
  oCurr = exist(_sId + i)
 }
 $(_sId + _iNum).style.display = "";
 $(_sPic + _iNum).src = _sTxt1;
}
function swapShow(_sId){
 var i = 0;
 var oCurr = exist(_sId + i);
 while(oCurr){
  hide(_sId + i);
  i++;
  oCurr = exist(_sId + i)
 }
}
function seekKey(_sKey){
 var i = 0;
 while(exist(_sKey + i)){
  i++;
 }
 return i;
}
function swapPic(_sId,_sAttr,_sTxt1, _sTxt2) {
 $(_sId)[_sAttr] = $(_sId)[_sAttr].indexOf(_sTxt1) > -1 ? _sTxt2 : _sTxt1;
}
function swap(_sId,_sAttr,_sTxt1, _sTxt2) {
 $(_sId)[_sAttr] = $(_sId)[_sAttr] == _sTxt1 ? _sTxt2 : _sTxt1;
}
function moveGif(_sId){
 swap(_sId,'className','marginLeft2','');
}
function moveStart(_sId){
 __tmp__time = setInterval("moveGif('" + _sId + "')",200);
}
function moveStop(_sId){
 clearInterval(__tmp__time);
 $(_sId).className = "marginLeft2";
}
function switchShow(){
 hide('left');
 swapPic('arrow','src','images/control_switch_up.gif','images/control_switch_down.gif');
 swapShow('hideLeft');
 swapShow('hideBody');
}
function scroll_to_top()
{
 document.body.scrollTop=0;
}
function mainFrameRedirect(url)
{
 oo = document.getElementById("mainFrame");
 oo.url = url;
}
</script>
</head>
<body>
  <table align="left" width="220" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td height="50" align="left" valign="top">
   <!-- 控制面板菜单 -->
  <table width="205" border="0" cellspacing="0" cellpadding="0" class="ctrl_menu">
   <tr height="5"><td></td></tr>
   <tr>
   <td align="center">
   <!-- BLOG文章 -->
   <table width="195" border="0" cellspacing="0" cellpadding="0" class="ctrl_menu_title_bg">
  <tr class="hand" onClick="hide('hideMenuFunc3')">
  <td width="174" class="ctrl_menu_title">BLOG文章管理</td>
  <td width="21"><image id='MenuFunc3' src="images/menu_title_down.gif"></td>
  </tr>
  <tr id="hideMenuFunc3">
  <td align="left" colspan="2" class="menu_box_pad">
  <table width="100%" border="0" cellspacing="5" cellpadding="0" class="menu_box">
   <tr>
   <th> </th>
   <td><a href="#" target="mainFrame" onClick="scroll_to_top()">发表BLOG文章</a></td>
   </tr>
   <tr>
   <th> </th>
   <td><a href="#" target="mainFrame" onClick="scroll_to_top()">BLOG文章管理</a></td>
   </tr>
   <tr>
   <th> </th>
   <td><a href="#" target="mainFrame" onClick="scroll_to_top()">BLOG评论管理</a></td>
   </tr>
  </table>    </td>
  </tr>
  </table>
   <!-- /BLOG文章 -->   </td>
   </tr>
   <tr height="5"><td></td></tr>
   <tr>
   <td align="center">
   <!-- BLOG信息 -->
   <table width="195" border="0" cellspacing="0" cellpadding="0" class="ctrl_menu_title_bg">
  <tr class="hand" onClick="hide('hideMenuFunc2')">
  <td width="174" class="ctrl_menu_title">BLOG信息设置</td>
  <td width="21"><image id='MenuFunc2' src="images/menu_title_down.gif"></td>
  </tr>
  <tr id="hideMenuFunc2">
  <td align="left" colspan="2" class="menu_box_pad" >
 <table width="100%" border="0" cellspacing="5" cellpadding="0" class="menu_box">
    <tr>
    <th> </th>
    <td><a href="#" target="mainFrame" onClick="scroll_to_top()">更改基本信息</a></td>
    </tr>
    <tr>
    <th> </th>
    <td><a href="#" target="mainFrame" onClick="scroll_to_top()">定制我的模板</a></td>
    </tr>
    <tr>
    <th> </th>
    <td><a href="#" target="mainFrame" onClick="scroll_to_top()">首页内容维护</a></td>
    </tr>
   </table></td>
  </tr>
  </table>
<!-- /BLOG信息 --></td>
   </tr>
   <tr height="5"><td></td></tr>
   <tr>
   <td align="center">
   <!-- 个人信息 -->
   <table width="195" border="0" cellspacing="0" cellpadding="0" class="ctrl_menu_title_bg">
  <tr class="hand" onClick="hide('hideMenuFunc1')">
  <td width="174" class="ctrl_menu_title">个人信息设置</td>
  <td width="21"><image id='MenuFunc1' src="images/menu_title_down.gif"></td>
  </tr>
  <tr id="hideMenuFunc1" style="display:none">
  <td align="left" colspan="2" class="menu_box_pad">
 <table width="100%" border="0" cellspacing="5" cellpadding="0" class="menu_box">
   <tr>
   <th> </th>
   <td><a target="mainFrame" href="#" onClick="scroll_to_top()">更改基本资料</a></td>
   </tr>
   <tr>
   <th> </th>
   <td><a target="mainFrame" href="#" onClick="scroll_to_top()">登录默认选项</a></td>
   </tr>
   </table>    </td>
  </tr>
  </table>
   <!-- /个人信息 -->   </td>
   </tr>
   <tr height="5"><td></td></tr>
   </table> 
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 #Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 #Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 #Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 #Javascript
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 #Javascript
You might like
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
React实现todolist功能
2020/12/28 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python实现自动清理重复文件
2020/08/24 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
简单说说tomcat的配置
2013/05/28 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
篝火晚会策划方案
2014/05/16 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2014年科技工作总结
2014/11/26 职场文书
优秀团员个人总结
2015/02/26 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
Java实现简单小画板
2022/06/10 Java/Android