`

JS HTML经典框架

 
阅读更多

switch.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<script language="javascript">
function $id(id){  
    return document.getElementById(id);  
}

window.onload = function(){
var count=0;
$id("menu_switch").onclick = function(){
		var frame_page = top.document.getElementById("frame_page");
		var menu_switch =$id("menu_switch");
		if(count%2==0){
			frame_page.cols = "0,10,*";
			menu_switch.style.backgroundImage='url(images/frame_show.gif)';
			menu_switch.title='点击打开管理界面菜单';
		}else{
			frame_page.cols = "153,10,*";
			menu_switch.style.backgroundImage='url(images/frame_hide.gif)';
			menu_switch.title='点击隐藏管理界面菜单';
		}
		count++;
	}
}
</script>
</head>

<body>
<div style="height:800px; padding-top:260px; width:100px; cursor:pointer; background:url(images/frame_switch_Bj.gif) repeat-y;">
	<div id="menu_switch" style="background:url(images/frame_hide.gif) no-repeat; width:10px; height:86px;" title="点击隐藏管理界面菜单"></div>
</div>
</div>
</body>
</html>

 

menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="style/basic.css" type="text/css" />
<link rel="stylesheet" href="style/menu.css" type="text/css" />
<script language="javascript">
/*共用*/
function $id(id){  
    return document.getElementById(id);  
}

window.onload = function(){
	var count_menu1=0;
	$id("menu1").onclick = function(){
		var menu1=$id("menu1");
		var menu1_hover=$id("menu1_hover");
		if(count_menu1%2==0){
			menu1_hover.style.display="block";
			menu1.style.backgroundImage="url(images/buttom.jpg)";
			menu1.style.backgroundRepeat="no-repeat";
			menu1.style.color="#b6241f";
		}else{
			menu1_hover.style.display="none";
			menu1.style.backgroundImage="url(images/buttom_hover.jpg)";
			menu1.style.backgroundRepeat="no-repeat";
			menu1.style.color="#fff";
		}
		count_menu1++;
	}
	
	var count_menu2=0;
	$id("menu2").onclick = function(){
		var menu2=$id("menu2");
		var menu2_hover=$id("menu2_hover");
		if(count_menu2%2==0){
			menu2_hover.style.display="block";
			menu2.style.backgroundImage="url(images/buttom.jpg)";
			menu2.style.backgroundRepeat="no-repeat";
			menu2.style.color="#b6241f";
		}else{
			menu2_hover.style.display="none";
			menu2.style.backgroundImage="url(images/buttom_hover.jpg)";
			menu2.style.backgroundRepeat="no-repeat";
			menu2.style.color="#fff";
		}
		count_menu2++;
	}
	
	var count_menu3=0;
	$id("menu3").onclick = function(){
		var menu3=$id("menu3");
		var menu3_hover=$id("menu3_hover");
		if(count_menu3%2==0){
			menu3_hover.style.display="block";
			menu3.style.backgroundImage="url(images/buttom.jpg)";
			menu3.style.backgroundRepeat="no-repeat";
			menu3.style.color="#b6241f";
		}else{
			menu3_hover.style.display="none";
			menu3.style.backgroundImage="url(images/buttom_hover.jpg)";
			menu3.style.backgroundRepeat="no-repeat";
			menu3.style.color="#fff";
		}
		count_menu3++;
	}
	
	var count_menu4=0;
	$id("menu4").onclick = function(){
		var menu4=$id("menu4");
		var menu4_hover=$id("menu4_hover");
		if(count_menu4%2==0){
			menu4_hover.style.display="block";
			menu4.style.backgroundImage="url(images/buttom.jpg)";
			menu4.style.backgroundRepeat="no-repeat";
			menu4.style.color="#b6241f";
		}else{
			menu4_hover.style.display="none";
			menu4.style.backgroundImage="url(images/buttom_hover.jpg)";
			menu4.style.backgroundRepeat="no-repeat";
			menu4.style.color="#fff";
		}
		count_menu4++;
	}
	rand_img();
}

var rand1 = 0;
var useRand = 0;
var images = new Array;
images[1] = "box01.png";
images[2] = "box02.png";
images[3] = "box03.png";
images[4] = "box04.png";
function rand_img(){
	var rand_img = $id("rand_img");
	rand_img.style.backgroundImage="url(images/box01.png)";
	var imgnum = images.length - 1;
	do {
	var randnum = Math.random();
	rand1 = Math.round((imgnum - 1) * randnum) + 1;
	} while (rand1 == useRand);
	useRand = rand1;
	rand_img.style.backgroundImage = "url(images/"+images[useRand]+")";
}

</script>
</head>
<body>
<div class="menu">
	<div class="box" id="rand_img">
    	<h2>后台管理系统</h2>
        <em><img src="../face/50/face.png" wmenuth="50" height="50" /></em>
        <p>管理员：chaoyi</p>
        <p><a href="###">打开首页</a>&nbsp;&nbsp;<a href="###">注销</a></p>
    </div>
    <h3><a id="menu1">用户管理</a></h3>
    <ul id="menu1_hover" style="display:none;">
    	<li><a href="userList.html" target="main">用户管理</a></li>
        <li><a href="userNews.html" target="main">新增管理员</a></li>
        <li><a href="userList.html" target="main">用户管理</a></li>
        <li><a href="userNews.html" target="main">新增管理员</a></li>
        <li><a href="userList.html" target="main">用户管理</a></li>
        <li><a href="userNews.html" target="main">新增管理员</a></li>
    </ul>
    <h3><a id="menu2">商品信息</a></h3>
     <ul id="menu2_hover" style="display:none;">
    	<li><a href="classUpdate.html" target="main">分类管理</a></li>
        <li><a href="classNews.html" target="main">创建分类</a></li>
        <li><a href="gooodsList.html" target="main">商品管理</a></li>
        <li><a href="gooodsNews.html" target="main">新增商品</a></li>
    </ul>
    <h3><a id="menu3">订单管理</a></h3>
     <ul id="menu3_hover" style="display:none;">
    	<li><a href="orderList.html" target="main">订单管理</a></li>
    </ul>
    <h3><a id="menu4">评论管理</a></h3>
     <ul id="menu4_hover"style="display:none;">
    	<li><a href="commentList.html" target="main">订单管理</a></li>
    </ul>
</div>
</body>
</html>

 

效果图：


 

 

  • 大小: 123.3 KB
0
顶
0
踩
分享到：
| JS 随机图片效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    非常经典的后台管理系统框架（HTML、JS源码）

    标题中的“非常经典的后台管理系统框架（HTML、JS源码）”指的是一个用于构建后端管理界面的软件开发框架，这个框架主要由HTML和JavaScript代码组成。这类框架通常包含一系列预设计的页面模板、组件和交互逻辑，以...

    10大js框架 javaScript框架

    在探讨“十大JavaScript框架”这一主题时，我们深入解析了多个关键框架，这些框架在现代Web开发中扮演着至关重要的角色。以下是对每个框架的详细分析： ### 1. Prototype Prototype是最早一批的JavaScript库之一，...

    Javascript，Html，Css，Frame框架整合的菜单样式

    在网页设计中，JavaScript、HTML、CSS以及Frame和Frameset框架的整合是构建交互式、动态网站的关键技术。本文将详细解析这些技术如何协同工作，创建出一个具有可收缩左侧菜单和并排子菜单的框架结构。 首先，HTML...

    html左右侧框架源码

    至于压缩包内的"左右侧框架"文件，可能包含了HTML文件（如`index.html`）、CSS文件（如`style.css`）、JavaScript文件（如`script.js`）以及其他可能的资源文件（如图片或图标）。HTML文件中会定义整体结构，CSS文件...

    学习HTML、CSS、JS以及相关框架时期的练习.zip

    学习HTML、CSS、JS以及相关框架时期的练习 学习HTML、CSS、JS以及相关框架时期的练习 学习HTML、CSS、JS以及相关框架时期的练习 学习HTML、CSS、JS以及相关框架时期的练习 学习HTML、CSS、JS以及相关框架时期的练习 ...

    html 后台框架 html后台框架

    6. **模板引擎**：一些框架如Ember.js使用模板语言来简化HTML的动态渲染，使得插入变量、控制流程和条件语句变得直观。 7. **状态管理**：对于大型应用，状态管理至关重要。Vuex（Vue的配套库）、Redux（React的...

    Javascript弹出框架

    JavaScript弹出框架是一种常见的网页交互技术，用于在用户与页面交互时显示额外信息或功能，如警告、确认对话框、模态窗口等。在这种框架中，`lhgdialog` 是一个具体的实现，它是一个轻量级且功能丰富的弹出对话框...

    html后台框架代码

    HTML后台框架是构建Web应用程序的一种高效工具，它整合了HTML、CSS、JavaScript以及其他前端技术，为开发者提供了一套完整的基础结构，以便快速开发出功能丰富的交互式网页应用。这些框架通常包括布局模板、UI组件、...

    php html js 后台框架

    【标题】：“PHP HTML JS 后台框架”指的是在Web开发中使用PHP作为服务器端脚本语言，HTML作为结构化标记语言，JavaScript作为客户端脚本语言构建的后台系统框架。这种框架通常包括一系列用于处理数据、渲染页面和...

    html框架适合初学者学习和开发

    HTML框架是网页设计和开发的重要工具，它们提供了一种结构化的、高效的方式来构建和维护复杂的网页应用。对于初学者来说，选择一个合适的HTML框架能够极大地提高学习效率和开发体验。"安然静态园"是一个可能的例子，...

    漂亮的html后台界面框架

    另一款叫做Element UI的框架，则是专为Vue.js设计的，它提供了大量的可复用组件，且风格现代，易用性高。 总的来说，选择一个“漂亮的html后台界面框架”能极大地提高开发效率，减少重复工作，并确保后台界面的专业...

    HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

    在IT行业中，前端开发是构建网站用户界面的关键环节，它主要涉及HTML、CSS、JavaScript以及各种前端框架。本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个...

    js无限极跨越框架获得html元素的位置（源码）

    6. `selectUser.js`: 主要的JavaScript源码，实现了跨框架获取元素位置的功能。 在`selectUser.js`中，开发者可能使用了递归方法来遍历所有框架，查找目标元素并计算其位置。递归的关键在于，每次进入一个iframe，...

    html 后台框架代码

    HTML 后台框架是构建网页应用的重要工具，它为开发者提供了结构化和模块化的开发方式，使得在HTML页面中整合后端逻辑变得更加高效和便捷。本文将深入探讨HTML后台框架的相关知识点，包括其核心概念、常见框架、优势...

Magicbox
Global site tag (gtag.js) - Google Analytics