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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
node.js中的console用法总结
Dec 15 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
JS中数组重排序方法
Nov 11 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
JS函数本身的作用域实例分析
Mar 16 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
Content-type 的说明
2006/10/09 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JsRender for object语法简介
2014/10/31 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Python如何对齐字符串
2020/07/30 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
团拜会策划方案
2014/06/07 职场文书
结婚堵门保证书
2015/05/08 职场文书
用电申请报告范文
2015/05/18 职场文书
2016年学校招生广告语
2016/01/28 职场文书
导游词之任弼时故居
2020/01/07 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers