层的拖动与隐藏
<html>
<head>
<title>可移动的显示层</title>powered by 25175.net
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
/*Post-it note script- by Wsabstract.com
Visit Website Abstraction (http://25175.net) for script
Credit must stay intact for use*/
body
{
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
#header
{
background:#eeeeee;
border: 1px dashed #0099CC;
}
#content
{
height:300px;
background:#eeff11;
}
#left
{
background:#0066FF;
float:left;
width:30%;
height:100%;
}
#footer
{
background:#FF0000;
}
#postit{
position:absolute;
width:250;
padding:5px;
background-color:lightyellow;
border:1px solid black;
z-index:100;
cursor:hand;
}
-->
</style>
<script type="text/javascript" language="javascript">
function show()
{
if (document.getElementById("postit").style.display=="none")
{
document.getElementById("postit").style.display="";
}
else
{
document.getElementById("postit").style.display="none"
}
}
</script>
</head>
<body bgcolor=#FFFFFF >
<!-------------------------------->
<div id="header">header<a href="javascript:show();">单击显示</a></div>
<div id="postit" style=" display:none;left:150px;top:150px">
<div align="right"><b><a href="javascript:ColseShow();">[关闭]</a></b></div>
<b>jojoo.net:</b><br>
<p><font size="2" face="Arial"><a href="http://www.25175.net" target="_new">经典实例、教程库<br>
</a>汇聚网界最多的网页特效之家@！</font></p>
</div>
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
<script>
//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0
///No need to edit beyond here///
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit
function ColseShow()
{
document.getElementById("postit").style.display="none"
}
function get_cookie4(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie4.length > 0) {
offset = document.cookie4.indexOf(search)
if (offset != -1) { // if cookie4 exists
offset += search.length
// set index of beginning of value
end = document.cookie4.indexOf(";", offset);
// set index of end of cookie4 value
if (end == -1)
end = document.cookie4.length;
returnvalue=unescape(document.cookie4.substring(offset, end))
}
}
return returnvalue;
}
function showornot(){
if (get_cookie4('postdisplay')==''){
showit()
document.cookie4="postdisplay=yes"
}
}
</script>
<script language="JavaScript1.2">
//drag drop function for ie4+ and NS6////
/////////////////////////////////
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
return false
}
}
function initializedrag(e){
if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>
<!---------------------------------->
</body>
</html>
