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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php debug 安装技巧
2011/04/30 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
轮播的简单实现方法
2016/07/28 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
js读取本地文件的实例
2017/12/22 Javascript
VUE重点问题总结
2018/03/19 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
汽车销售经理岗位职责
2014/06/09 职场文书
青年标兵事迹材料
2014/08/16 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
质检员岗位职责范本
2015/04/07 职场文书
担保贷款承诺书
2015/04/30 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript