注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

樱之花

叶散的时候,你明白欢聚;花谢的时候,你明白青春.

 
 
 

日志

 
 
关于我

分类中“我的实验室”是我在日常工作中的一些知识总结,有些写的比较匆忙,可能大家在阅读时会产生困扰,后期有时间我会重新整理编辑,谢谢大家的到访,您们的支持是我前进的动力!

网易考拉推荐

页面实现“最小化”的功能  

2007-03-08 16:01:33|  分类: 网页界面 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

参考代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mobile layer</title>
<style type="text/css">
body{
font:11px Verdana;
background-color:slategray;
text-align:center;
}
#xMsg{
border:#fff 1px solid;
cursor:hand;
}
.xOp{
font:10px webdings;
color:white;
border:0px;
width:12px
}
</style>
<script language="javascript" type="text/javascript">
var _x0 = 0
var _y0 = 0
var _x1 = 0
var _y1 = 0;

//var _offx = 6
//var _offy = 6;

var moveable=false;

function startDrag(obj)
{
if(event.button == 1)
{
var win=obj.parentNode;
//get focus;
obj.setCapture();

//get the position of mouse
_x0 = event.clientX;
_y0 = event.clientY;
//get the position of layer
_x1 = parseInt(win.style.left);
_y1 = parseInt(win.style.top);

moveable = true;
}
}

function doDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
win.style.left = _x1 + event.clientX - _x0;
win.style.top = _y1 + event.clientY - _y0;
}
}

function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
obj.releaseCapture();
moveable = false;
}
}

function minWin(obj)
{
//get the layer whose id is xMsg
var win = obj.parentNode.parentNode;
//get it's parent element(layer too!)
var tit = obj.parentNode;
//get another layer which is near its parent element
var msg = tit.nextSibling;
//define the layer's original state
var flag = msg.style.display == "none";
if(flag)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 1 * 2;
msg.style.display = "block";
win.style.top=Top;
win.style.left=Left;
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 1 * 2;
Top=win.style.top;
Left=win.style.left;
win.style.top=document.documentElement.scrollTop+

document.documentElement.scrollHeight-25
win.style.left=0;
msg.style.display = "none";
obj.innerHTML = "2";
}
}

function closeWin(obj)
{
var win = obj.parentNode.parentNode;
win.style.display = "none";
}

</script>
</head>

<body>
<div

style="left:20px;top:20px;z-index:99;;width:300px;height:220px;">
<!-- div -->
<div style="border:0px;height:16px"

onmouseup="stopDrag(this)" >
<span style="border:0px;width:270px"

ondblclick="minWin(this.nextSibling)"></span><span

onclick="minWin(this)">0</span><span >r</span>
</div>
<div style="border-top:#fff 1px solid;background-color:#eee;height:200px">
this is a test!
<p>designed by leon in Mar 2006
</div>
<!-- div -->
</div>

</body>
</html>

  评论这张
 
阅读(377)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017