本日记包含有下载文件，请点击下面连接下载
09-0609-06
19
仿Window Vista的Web桌面系统，基于Js的Ajax框架。
安装
1.将MySql.sql导入MySql数据库。
2.修改\system\os\config.php中的Mysql连接。
目录结构
资源目录包含：
1 、CSS ，桌面的CSS文件
2 、images，默认图像
3 、themes， 主题
4 、wallpapers，桌面壁纸
系统目录中包含：
1 、core，核心JavaScript文件
2 、login，登陆文件
3 、modules，模块/应用插件
4 、os，配置和操作系统PHP类的lib目录
安装
1.将MySql.sql导入MySql数据库。
2.修改\system\os\config.php中的Mysql连接。
目录结构
资源目录包含：
1 、CSS ，桌面的CSS文件
2 、images，默认图像
3 、themes， 主题
4 、wallpapers，桌面壁纸
系统目录中包含：
1 、core，核心JavaScript文件
2 、login，登陆文件
3 、modules，模块/应用插件
4 、os，配置和操作系统PHP类的lib目录
09-0609-06
19
<html>
<head>
<title>仿Joyo网站菜单</title>
<script>
var t=setTimeout("null",50);
function $(ye){
ye=document.getElementById(ye);
return ye;
}
function padW(){
var p;
if($("cha").offsetWidth>$("ti").offsetWidth){
p=$("ti").offsetLeft-(($("cha").offsetWidth-$("ti").offsetWidth)/2);
}
else{
p=$("ti").offsetLeft+(($("ti").offsetWidth-$("cha").offsetWidth)/2);
}
return p;
}
function padH(){
var s;
s=$("ti").offsetTop+$("ti").offsetHeight-3;
return s;
}
function showDiv(){
$("cha").style.display='block';
}
function hideDiv(){
$("cha").style.display='none';
}
</script>
<script for=window event=onload>
var w=padW(),h=padH();
with($("cha")){
style.display='none';
style.pixelLeft=w;
style.pixelTop=h;
}
</script>
<style type="text/css">
#cha{
position:absolute;
width:300px;
left:-1000px;
top:-1000px;
border:2px solid #cccccc;
background:orange;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=gold);
}
a:link{
text-decoration:none;
color:black;
font:normal small-caps bold 12px/140% "Lucida Grande",sans-serif;
}
a:visited{
text-decoration:none;
color:blue;
font:normal small-caps bold 12px/140% "Lucida Grande",sans-serif;
}
a:hover{
text-decoration:underline;
color:red;
font:normal small-caps bold 12px/140% "Lucida Grande",sans-serif;
}
#main{
position:absolute;left:250px;top:100px;
}
</style>
</head>
<body>
<div onmouseover=showDiv() onmouseout=hideDiv() style="border:1px solid red"
id=main>
<div id="cha" name="cha">
<table>
<tr><td><a href="http://www.it365cn.com">织梦乱弹</a></td><td
width="40"> </td><td><a href="http://www.smallrain.net">小雨</a></td></tr>
<tr><td><a href="http://yexj00.5dm.cn/">Yexj00's Blog</a></td><td
width="40"> </td><td><a href="http://www.W3pop.com">w3pop</a></td></tr>
<tr><td><a href="http://www.blueIdea.com">蓝色理想</a></td><td
width="40"> </td><td><a href="http://www.mysheji.com/blog/">设计前沿
</a></td></tr>
<tr><td><a href="http://www.cnbruce.com/">布鲁斯狼</a></td><td
width="40"> </td><td><a href="http://www.webjx.com/">网页教学</a></td></tr>
</table>
</div>
<span style="cursor:hand;" id="ti" onmouseover=showDiv() onmouseout="hideDiv()">
每天常去的网站</span><br>
</div>
</body>
</html>
<head>
<title>仿Joyo网站菜单</title>
<script>
var t=setTimeout("null",50);
function $(ye){
ye=document.getElementById(ye);
return ye;
}
function padW(){
var p;
if($("cha").offsetWidth>$("ti").offsetWidth){
p=$("ti").offsetLeft-(($("cha").offsetWidth-$("ti").offsetWidth)/2);
}
else{
p=$("ti").offsetLeft+(($("ti").offsetWidth-$("cha").offsetWidth)/2);
}
return p;
}
function padH(){
var s;
s=$("ti").offsetTop+$("ti").offsetHeight-3;
return s;
}
function showDiv(){
$("cha").style.display='block';
}
function hideDiv(){
$("cha").style.display='none';
}
</script>
<script for=window event=onload>
var w=padW(),h=padH();
with($("cha")){
style.display='none';
style.pixelLeft=w;
style.pixelTop=h;
}
</script>
<style type="text/css">
#cha{
position:absolute;
width:300px;
left:-1000px;
top:-1000px;
border:2px solid #cccccc;
background:orange;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=gold);
}
a:link{
text-decoration:none;
color:black;
font:normal small-caps bold 12px/140% "Lucida Grande",sans-serif;
}
a:visited{
text-decoration:none;
color:blue;
font:normal small-caps bold 12px/140% "Lucida Grande",sans-serif;
}
a:hover{
text-decoration:underline;
color:red;
font:normal small-caps bold 12px/140% "Lucida Grande",sans-serif;
}
#main{
position:absolute;left:250px;top:100px;
}
</style>
</head>
<body>
<div onmouseover=showDiv() onmouseout=hideDiv() style="border:1px solid red"
id=main>
<div id="cha" name="cha">
<table>
<tr><td><a href="http://www.it365cn.com">织梦乱弹</a></td><td
width="40"> </td><td><a href="http://www.smallrain.net">小雨</a></td></tr>
<tr><td><a href="http://yexj00.5dm.cn/">Yexj00's Blog</a></td><td
width="40"> </td><td><a href="http://www.W3pop.com">w3pop</a></td></tr>
<tr><td><a href="http://www.blueIdea.com">蓝色理想</a></td><td
width="40"> </td><td><a href="http://www.mysheji.com/blog/">设计前沿
</a></td></tr>
<tr><td><a href="http://www.cnbruce.com/">布鲁斯狼</a></td><td
width="40"> </td><td><a href="http://www.webjx.com/">网页教学</a></td></tr>
</table>
</div>
<span style="cursor:hand;" id="ti" onmouseover=showDiv() onmouseout="hideDiv()">
每天常去的网站</span><br>
</div>
</body>
</html>
09-0609-06
19
下面是代码,适合学习学习!
<SCRIPT type="text/javascript">
function chsel2(){
var qq=document.getElementsByName("ss")[0];
obj_div=document.getElementById("tt_div");
if(qq[qq.selectedIndex].value==2){
obj_div.innerHTML="<table><tr><td>id:</td><td>李猛</td></tr><tr><td>name:</td><td>飞去</td></tr></table>";
}
if(qq[qq.selectedIndex].value==1){
str="<table><tr><td>id:</td><td>神舟归来</td></tr><tr><td>name:</td><td>国庆来临</td></tr>";
str=str+"<tr><td>hello</td><td><input type='text' value='' name=parame[id]></td></tr></table>";
obj_div.innerHTML=str;
}
}
</SCRIPT>
<form name="ff">
<select name="ss" onChange="chsel2();">
<option value=0>请选择品牌</option>
<option value=1>tcl_id</option>
<option value=2>sony_hello world</option>
</select>
</form>
<table border="1">
<tr><td>helllo world</td><td>how do yoe do?</td></tr>
<tr><td>id 1:</td><td>虎虎虎虎</td></tr>
<tr><td colspan="2"><div align="center" id="tt_div"></div></td></tr>
</table>
function chsel2(){
var qq=document.getElementsByName("ss")[0];
obj_div=document.getElementById("tt_div");
if(qq[qq.selectedIndex].value==2){
obj_div.innerHTML="<table><tr><td>id:</td><td>李猛</td></tr><tr><td>name:</td><td>飞去</td></tr></table>";
}
if(qq[qq.selectedIndex].value==1){
str="<table><tr><td>id:</td><td>神舟归来</td></tr><tr><td>name:</td><td>国庆来临</td></tr>";
str=str+"<tr><td>hello</td><td><input type='text' value='' name=parame[id]></td></tr></table>";
obj_div.innerHTML=str;
}
}
</SCRIPT>
<form name="ff">
<select name="ss" onChange="chsel2();">
<option value=0>请选择品牌</option>
<option value=1>tcl_id</option>
<option value=2>sony_hello world</option>
</select>
</form>
<table border="1">
<tr><td>helllo world</td><td>how do yoe do?</td></tr>
<tr><td>id 1:</td><td>虎虎虎虎</td></tr>
<tr><td colspan="2"><div align="center" id="tt_div"></div></td></tr>
</table>
09-0609-06
19
利用JS做到隐藏div和显示div
代码如下：
onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！
代码如下：
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->
onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！
