CSS部分body
{
margin-left:0px;
margin-top:0px;
font-size:12px;
}
ul
{
margin-top:0px;
margin-bottom:0px;
font-size:12px;
}
ul li
{
margin-top:0px;
margin-bottom:0px;
list-style-image: url(*.jpg);
}
ul li a
{
cursor:pointer;
}
.UserList li
{
list-style-image: url(*.jpg);
margin-left:-20px
}
.ShowDiv
{
position: absolute;
overflow: hidden;
width: 10px;
height: 10px;
z-index: 10;
top: 50px;
left: 50px;
background-color: Aqua;
cursor:hand;
}
.ShowDivBack
{
position:absolute;
overflow:hidden;
width:10px;
height:10px;
z-index:9;
top:52px;
left:52px;
background-color:Black;
}
.WishDiv
{
width: 242px;
height: 232px;
position: absolute;
font-size:12px;
cursor:hand;
}
.WishContent
{
width:200px;
height:140px;
position: absolute;
left:26px;
top:45px;
overflow:hidden;
}
.WishByName
{
width:200px;
height:20px;
text-align:right;
position: absolute;
left: 26px;
top: 187px
}
.FrmGroupMouseOut
{
width: 184px;
height: 20px;
background-image: url(*.jpg);
text-align:center;
font-size:12px;
cursor:hand;
color: silver;
}.FrmGroupMouseOver
{
width: 184px;
height: 20px;
background-image: url(*.jpg);
text-align:center;
font-size:12px;
cursor:hand;
overflow:hidden;
}
.FrmMessageMouseOver
{
width: 35px;
height: 14px;
position: absolute;
top: 65px;
left: 20px;
background-image: url(*.jpg);
font-size: 12px;
cursor: pointer;
padding-left: 16px;
background-repeat: no-repeat;
color: #000033;
}
.FrmMessageMouseOut
{
width: 35px;
height: 14px;
position: absolute;
top: 65px;
left: 20px;
background-image: url(*.jpg);
font-size: 12px;
cursor: pointer;
padding-left: 16px;
background-repeat: no-repeat;
color: #ffffff;
}
.FrmMoreMouseOut
{
width: 16px;
height: 16px;
position: absolute;
top: 25px;
left: 55px;
background-image: url(*.jpg);
font-size: 1px;
cursor:hand;
}
.FrmMoreMouseOver
{
width: 16px;
height: 16px;
position: absolute;
top: 25px;
left: 55px;
background-image: url(*.jpg);
font-size: 1px;
cursor:hand;
}
.FrmCloseMouseOut
{
width: 39px;
height: 17px;
top: 10px;
left: 152px;
position:absolute;
background-image: url(*.jpg);
font-size:1px;
cursor:hand;
}
.FrmCloseMouseOver
{
width: 39px;
height: 17px;
top: 10px;
left: 152px;
position:absolute;
background-image: url(*.jpg);
font-size:1px;
cursor:hand;
}
.UserUnSelect
{
height:40px;
margin-top:2px;
margin-left:5px;
font-size:12px;
color:#696969;
padding:2px;
}
.UserSelect
{
height:40px;
margin-top: 2px;
margin-left: 5px;
font-size: 12px;
color: #696969;
padding: 2px;
border-right: #99ccff 1px solid;
border-top: #99ccff 1px solid;
border-left: #99ccff 1px solid;
border-bottom: #99ccff 1px solid;
background-color: #ccccff;
cursor:pointer;
}
.UserImageMouseOut
{
float:left;
clear:left;
}
.UserImageMouseOver
{
}
.UserNameIdi
{
float:left;
margin-left:5px
}
.UserDetailDiv
{
width: 302px;
height: 243px;
position: absolute;
background-image: url(*.jpg);
z-index: 9000;
background-repeat: no-repeat;
}
.UserDetailInformatiomLoading
{
width: 150px;
height: 126px;
top: 20px;
left: 140px;
position: absolute;
background-repeat: no-repeat;
background-image: url(*.gif);
}
.UserDetailInformatiomComplete
{
width: 150px;
height: 126px;
top: 10px;
left: 100px;
position: absolute;
font-size:12px;
}
.UserDetailLocation
{
position: absolute;
font-size:12px;
width: 150px;
height: 126px;
top: 220px;
left: 150px;
}
.UserGirl
{
width: 86px;
height: 126px;
position: absolute;
left:10px;
top:10px;
background-image: url(*.jpg);
}
.UserBoy
{
width: 86px;
height: 126px;
position: absolute;
left:10px;
top:10px;
background-image: url(*.jpg);
}
#MainFrm
{
width:202px;
height:600px;
position:absolute;
top:100px;
left:400px;
z-index:9000;
}
#FrmTop
{
width: 202px;
height: 85px;
position: absolute;
background-image: url(*.jpg);
cursor:move;
}
#FrmLeft
{
width:9px;
height:482px;
background-image: url(*.jpg);
position: absolute;
top:85px;
left:0px;
}
#FrmMid
{
width:184px;
height:482px;
position:absolute;
top:85px;
left:9px;
overflow:hidden;
background-image: url(*.jpg);
}
#FrmRight
{
width:9px;
height:482px;
background-image: url(*.jpg);
position:absolute;
top:85px;
left:193px;
}
#FrmBottom
{
width: 202px;
height:33px;
background-image: url(*.jpg);
position:absolute;
top:567px;
left:0px;
}
#FrmUserHead
{
width: 40px;
height: 40px;
position: absolute;
top: 15px;
left: 10px;
background-image: url(*.jpg);
border-right: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
border-bottom: #ffffff 1px solid;
}
.FrmMenuMouseOut
{
width: 16px;
height: 12px;
position: absolute;
top: 66px;
left: 80px;
background-image: url(*.jpg);
background-repeat: no-repeat;
padding-left: 17px;
cursor: pointer;
color: #ffffff;
}
.FrmMenuMouseOver
{
width: 16px;
height: 12px;
position: absolute;
top: 66px;
left: 80px;
background-image: url(*.jpg);
background-repeat: no-repeat;
padding-left: 17px;
cursor: pointer;
color: gray;
}.MessageFrm
{
width:0px;
height:0px;
position:absolute;
overflow:hidden;
}
.MessageHead
{
width: 350px;
height: 96px;
background-image: url(*.jpg);
position:absolute;
cursor:move;
}
.MessageCloseMouseOut
{
width: 21px;
height: 21px;
background-image: url(*.jpg);
top:4px;
left:320px;
position:absolute;
}
.MessageCloseMouseOver
{
width: 21px;
height: 21px;
background-image: url(*.jpg);
top:4px;
left:320px;
position:absolute;
cursor:pointer;
}
.MessageAboutUser
{
width: 100px;
height: 40px;
position: absolute;
top: 60px;
left: 20px;
color: #000066;
font-size: 12px;
}
{
margin-left:0px;
margin-top:0px;
font-size:12px;
}
ul
{
margin-top:0px;
margin-bottom:0px;
font-size:12px;
}
ul li
{
margin-top:0px;
margin-bottom:0px;
list-style-image: url(*.jpg);
}
ul li a
{
cursor:pointer;
}
.UserList li
{
list-style-image: url(*.jpg);
margin-left:-20px
}
.ShowDiv
{
position: absolute;
overflow: hidden;
width: 10px;
height: 10px;
z-index: 10;
top: 50px;
left: 50px;
background-color: Aqua;
cursor:hand;
}
.ShowDivBack
{
position:absolute;
overflow:hidden;
width:10px;
height:10px;
z-index:9;
top:52px;
left:52px;
background-color:Black;
}
.WishDiv
{
width: 242px;
height: 232px;
position: absolute;
font-size:12px;
cursor:hand;
}
.WishContent
{
width:200px;
height:140px;
position: absolute;
left:26px;
top:45px;
overflow:hidden;
}
.WishByName
{
width:200px;
height:20px;
text-align:right;
position: absolute;
left: 26px;
top: 187px
}
.FrmGroupMouseOut
{
width: 184px;
height: 20px;
background-image: url(*.jpg);
text-align:center;
font-size:12px;
cursor:hand;
color: silver;
}.FrmGroupMouseOver
{
width: 184px;
height: 20px;
background-image: url(*.jpg);
text-align:center;
font-size:12px;
cursor:hand;
overflow:hidden;
}
.FrmMessageMouseOver
{
width: 35px;
height: 14px;
position: absolute;
top: 65px;
left: 20px;
background-image: url(*.jpg);
font-size: 12px;
cursor: pointer;
padding-left: 16px;
background-repeat: no-repeat;
color: #000033;
}
.FrmMessageMouseOut
{
width: 35px;
height: 14px;
position: absolute;
top: 65px;
left: 20px;
background-image: url(*.jpg);
font-size: 12px;
cursor: pointer;
padding-left: 16px;
background-repeat: no-repeat;
color: #ffffff;
}
.FrmMoreMouseOut
{
width: 16px;
height: 16px;
position: absolute;
top: 25px;
left: 55px;
background-image: url(*.jpg);
font-size: 1px;
cursor:hand;
}
.FrmMoreMouseOver
{
width: 16px;
height: 16px;
position: absolute;
top: 25px;
left: 55px;
background-image: url(*.jpg);
font-size: 1px;
cursor:hand;
}
.FrmCloseMouseOut
{
width: 39px;
height: 17px;
top: 10px;
left: 152px;
position:absolute;
background-image: url(*.jpg);
font-size:1px;
cursor:hand;
}
.FrmCloseMouseOver
{
width: 39px;
height: 17px;
top: 10px;
left: 152px;
position:absolute;
background-image: url(*.jpg);
font-size:1px;
cursor:hand;
}
.UserUnSelect
{
height:40px;
margin-top:2px;
margin-left:5px;
font-size:12px;
color:#696969;
padding:2px;
}
.UserSelect
{
height:40px;
margin-top: 2px;
margin-left: 5px;
font-size: 12px;
color: #696969;
padding: 2px;
border-right: #99ccff 1px solid;
border-top: #99ccff 1px solid;
border-left: #99ccff 1px solid;
border-bottom: #99ccff 1px solid;
background-color: #ccccff;
cursor:pointer;
}
.UserImageMouseOut
{
float:left;
clear:left;
}
.UserImageMouseOver
{
}
.UserNameIdi
{
float:left;
margin-left:5px
}
.UserDetailDiv
{
width: 302px;
height: 243px;
position: absolute;
background-image: url(*.jpg);
z-index: 9000;
background-repeat: no-repeat;
}
.UserDetailInformatiomLoading
{
width: 150px;
height: 126px;
top: 20px;
left: 140px;
position: absolute;
background-repeat: no-repeat;
background-image: url(*.gif);
}
.UserDetailInformatiomComplete
{
width: 150px;
height: 126px;
top: 10px;
left: 100px;
position: absolute;
font-size:12px;
}
.UserDetailLocation
{
position: absolute;
font-size:12px;
width: 150px;
height: 126px;
top: 220px;
left: 150px;
}
.UserGirl
{
width: 86px;
height: 126px;
position: absolute;
left:10px;
top:10px;
background-image: url(*.jpg);
}
.UserBoy
{
width: 86px;
height: 126px;
position: absolute;
left:10px;
top:10px;
background-image: url(*.jpg);
}
#MainFrm
{
width:202px;
height:600px;
position:absolute;
top:100px;
left:400px;
z-index:9000;
}
#FrmTop
{
width: 202px;
height: 85px;
position: absolute;
background-image: url(*.jpg);
cursor:move;
}
#FrmLeft
{
width:9px;
height:482px;
background-image: url(*.jpg);
position: absolute;
top:85px;
left:0px;
}
#FrmMid
{
width:184px;
height:482px;
position:absolute;
top:85px;
left:9px;
overflow:hidden;
background-image: url(*.jpg);
}
#FrmRight
{
width:9px;
height:482px;
background-image: url(*.jpg);
position:absolute;
top:85px;
left:193px;
}
#FrmBottom
{
width: 202px;
height:33px;
background-image: url(*.jpg);
position:absolute;
top:567px;
left:0px;
}
#FrmUserHead
{
width: 40px;
height: 40px;
position: absolute;
top: 15px;
left: 10px;
background-image: url(*.jpg);
border-right: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
border-bottom: #ffffff 1px solid;
}
.FrmMenuMouseOut
{
width: 16px;
height: 12px;
position: absolute;
top: 66px;
left: 80px;
background-image: url(*.jpg);
background-repeat: no-repeat;
padding-left: 17px;
cursor: pointer;
color: #ffffff;
}
.FrmMenuMouseOver
{
width: 16px;
height: 12px;
position: absolute;
top: 66px;
left: 80px;
background-image: url(*.jpg);
background-repeat: no-repeat;
padding-left: 17px;
cursor: pointer;
color: gray;
}.MessageFrm
{
width:0px;
height:0px;
position:absolute;
overflow:hidden;
}
.MessageHead
{
width: 350px;
height: 96px;
background-image: url(*.jpg);
position:absolute;
cursor:move;
}
.MessageCloseMouseOut
{
width: 21px;
height: 21px;
background-image: url(*.jpg);
top:4px;
left:320px;
position:absolute;
}
.MessageCloseMouseOver
{
width: 21px;
height: 21px;
background-image: url(*.jpg);
top:4px;
left:320px;
position:absolute;
cursor:pointer;
}
.MessageAboutUser
{
width: 100px;
height: 40px;
position: absolute;
top: 60px;
left: 20px;
color: #000066;
font-size: 12px;
}
.MessageSelfIDi
{
width: 300px;
height: 40px;
position: absolute;
top: 60px;
left: 60px;
color: #660000;
font-size: 12px;
}
.MessageType
{
width: 328px;
height: 33px;
position: absolute;
top: 96px;
left: 11px;
background-image: url(*.jpg);
}
.MessageLeft
{
width: 11px;
height: 398px;
left:0px;
top:96px;
background-image: url(*.jpg);
position:absolute;
}
.MessageRight
{
width: 11px;
height: 398px;
left:339px;
top:96px;
background-image: url(*.jpg);
position:absolute;
}
.MessageShow
{
width: 328px;
height: 200px;
top: 129px;
left: 11px;
position: absolute;
overflow: auto;
background-color: #99ffff;
}
.MessageMeun
{
width: 328px;
height: 31px;
left:11px;
top:329px;
background-image: url(*.jpg);
position:absolute;
}
.MessageMeun img
{
float: right;
margin-top: 8px;
margin-right: 10px;
cursor: hand;
}
.MessageInput
{
width: 328px;
height: 134px;
top: 360px;
left: 11px;
position: absolute;
overflow: auto;
background-color: #99ffff;
}
.MessageImage
{
width: 329px;
height: 235px;
position: absolute;
top: 95px;
left: 10px;
border-right: darkgray 1px solid;
border-top: darkgray 1px solid;
border-left: darkgray 1px solid;
border-bottom: darkgray 1px solid;
background-image: url(*.jpg);
background-repeat: no-repeat;
padding-right: 8px; padding-left: 4px; padding-bottom: 5px; padding-top: 25px;
overflow:hidden;
background-color: #ccffff;
}
.MessageImage img
{
margin:1px;
cursor:pointer;
}
.MessageBottom
{
width: 350px;
height: 56px;
top: 494px;
left: 0px;
position: absolute;
background-image: url(*.jpg);
}
.MessageBottom input
{
border-bottom:#ACACAC 1px solid;
border-right:#ACACAC 1px solid;
border-top:#ACACAC 1px solid;
border-left:#ACACAC 1px solid;
font-size:9pt;
background-color:#ccccff;
float:right;
margin-right:13px;
margin-top:2px;
width:80px;
}
.GroupMessage
{
/*width:545px;
height:534px;*/
width:0px;
height:0px;
position:absolute;
overflow:hidden;
font-size:12px;
}
.GroupMessageTop
{
position: absolute;
width: 545px;
height: 89px;
top: 0px;
left: 0px;
background-image: url(*.jpg);
cursor:move;
}
.GroupMessageLeft
{
position: absolute;
width: 9px;
height: 445px;
top: 89px;
left: 0px;
background-image: url(*.jpg);
}
.GroupMessageRight
{
position: absolute;
width: 214px;
height: 445px;
top: 89px;
left: 331px;
background-image: url(*.jpg);
}
.GroupMessageMenu
{
position: absolute;
width: 322px;
height: 22px;
top: 360px;
left: 9px;
background-image: url(*.jpg);
}
.GroupMessageBottom
{
position: absolute;
width: 322px;
height: 42px;
top: 492px;
left: 9px;
background-image: url(*.jpg);
}
.GroupMessageBottom input
{
border-bottom: #ACACAC 1px solid;
border-right: #ACACAC 1px solid;
border-top: #ACACAC 1px solid;
border-left: #ACACAC 1px solid;
font-size: 9pt;
background-color: #ccccff;
float: right;
margin-right: 13px;
margin-top: 12px;
width: 80px;
}
.GroupMessageCloseMouseOut
{
position: absolute;
width: 21px;
height: 21px;
top: 4px;
left: 515px;
background-image: url(*.jpg);
}
.GroupMessageCloseMouseOver
{
position: absolute;
width: 21px;
height: 21px;
top: 4px;
left: 515px;
background-image: url(*.jpg);
cursor:pointer;
}
.GroupMessageShow
{
position: absolute;
width: 322px;
height: 271px;
left: 9px;
top: 89px;
overflow: auto;
background-color: #ffffff;
}
.GroupMessageInput
{
position: absolute;
width: 322px;
height: 110px;
left: 9px;
top: 382px;
overflow: auto;
background-color: #ffffff;
}
.GroupCallBoard
{
position: absolute;
width: 190px;
height: 130px;
left: 9px;
top: 22px;
overflow: auto;
background-color: #ffffff;
}
.GroupUserList
{
position: absolute;
width: 190px;
height: 230px;
left: 9px;
top: 192px;
overflow: auto;
background-color: #ffffff;
}
.GroupMessageName
{
position: absolute;
width: 190px;
height: 40px;
left: 25px;
top: 10px;
font-size:12px;
}
.MeunDiv
{
position:absolute;
z-index:9999;
}
.MeunDiv a
{
background-color: aliceblue;
text-decoration: none;
display: block;
width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 11px;
border-right: thistle 1px solid;
border-top: thistle 1px solid;
border-left: thistle 1px solid;
border-bottom: thistle 1px solid;
color: #660000;
}
.MeunDiv a:hover
{
position: absolute;
width: 120px;
height: 40px;
line-height: 40px;
font-size: 15px;
z-index: 100;
margin: -10px 0 0 -10px;
background-color: #ffccff;
}
<head id="Head1">
<title>div弹出层</title>
<link href="CSS/ProtoType.css" type="text/css" rel="Stylesheet" />
<script src="JS/prototype.js" type="text/javascript"></script>
<script src="JS/test.js" type="text/javascript"></script>
</head>
<body onload="initDragControl('a')">
<form id="form1">
<div style="background-color:Aqua;position:absolute;text-align:center;width:200px;height:200px;cursor:hand" id="dragDiv1">
<input id="test" type="button" value="ShowDiv1" onclick="TestShowDiv(event,this)" />
<input id="Button1" type="button" value="ShowDiv2" onclick="TestShowDiv(event,this)" />
<input id="Button2" type="button" value="ShowDiv3" onclick="TestShowDiv(event,this)" />
</div>
</form>
</body>
</html>
<input id="Button2" type="hidden" value="ShowDiv3" onclick="TestShowDiv(event,this)" />
<a href="#" onclick="javascript:TestShowDiv(event, document.getElementById('Button2'));void(0);"><img src='' border='0'></a>把Button隐藏,用img代替
<img src="1.jpg" id="Button2" onclick="TestShowDiv(event,this)" style="cursor:hand" />
不是更简单?
会不会造成多个对象产生?
想触发个事件TO Free_Wind22
你的方法不对