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

gmd20的个人空间

// 编程和生活

 
 
 

日志

 
 

javascript代码收集-可拖动和改变大小的浮动层,模拟窗体  

2008-10-15 15:53:37|  分类: 程序设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在IE8和firefox3中测试通过,有网友代码修改而来。可以用来做网站的漂浮拖动模块吧。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动层</title>
</head>


<script language="javascript" >

var Browser_Name=navigator.appName;
    
var is_IE=(Browser_Name=="Microsoft Internet Explorer");
       
var x=0,y=0,x1=0,y1=0,xx=0,yy=0,xx1=0,yy1=0;
var moveable=false;
var index=10000;
var resizeable=false;
//开始拖动

function startDrag(obj,evt){
e=evt?evt:window.event;
if(true){
if (!window.captureEvents){
obj.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
var win=obj.parentNode;//取得父窗体
win.style.zIndex=++index;//设置父窗体的Z轴值
x= e.clientX;//取得当前鼠标的X坐标
y= e.clientY;//取得当前鼠标的Y坐标
x1 = parseInt(win.style.left);//将父窗体的距浏览器左边界的距离转换为NUMBER
y1 = parseInt(win.style.top);//将父窗体的距浏览器上边界的距离转换为NUMBER
moveable=true;

}
}
function drag(evt){
e=evt?evt:window.event;
if(moveable){

var win=document.getElementById ("dialogbox");
win.style.left =x1+e.clientX-x;
win.style.top =y1+e.clientY-y;

}
}
//停止拖动
function stopDrag(event)
{
   var obj=document.getElementById ("title");
if(moveable)
{

if (is_IE){
   obj.releaseCapture();
}else{
   e.preventDefault();
   document.addEventListener("mouseup",stopDrag,true);
   document.addEventListener("mousemove",drag, true);
  
}
moveable = false;
}
}


function Resizing(evt)
{
   var e= evt ?evt: window.event;
  
if(resizeable){

    var win=document.getElementById ("dialogbox");
     win.style.width = x1+ e.screenX-x;
     win.style.height =y1+ e.screenY-y;

}
}

//停止缩放
function stopResize(evt)
{
var obj=document.getElementById ("border");
if(resizeable)
{
if (is_IE){
    obj.releaseCapture();
} else{
    document.removeEventListener("mouseup",stopResize,true);
    document.removeEventListener("mousemove",Resizing,true);

}
resizeable = false;
}

}
//开始缩放

function startResize (obj,evt){
var e=evt;

if (is_IE){
   obj.setCapture();
}else{
   e.preventDefault();
   document.addEventListener("mouseup",stopResize,true);
   document.addEventListener("mousemove",Resizing,true);
  
}
var win=obj.parentNode;//取得父窗体
win.style.zIndex=++index;//设置父窗体的Z轴值
x= e.screenX;//clientX;//取得当前鼠标的X坐标
y= e.screenY;//clientY;//取得当前鼠标的Y坐标
x1 = parseInt(win.style.width);
y1 = parseInt(win.style.height);
resizeable=true;


}


</script>
<body >
<div id="dialogbox" style="position:absolute; width:200px; height:200px; background-color:#99CCFF; z-index:200; top:100px; left:50px;">
<div id="title" onMouseDown="startDrag(this,event)" onMouseMove="drag(event)" onMouseUp="stopDrag(event)" style="width:100%; height:20px; background-color:#330033; top:0px; left:0px; z-index:200; position:absolute; font-size:9pt; color:#FFFFFF; padding-top:5px; padding-left:5px;">浮动窗口</div>

<div id="border" style="width:5px; height:100%; background-color:#00dd00; top:20px; left:150px; z-index:150; float:right;position:related;cursor:e-resize; " onMouseDown="startResize(this,event)" onMouseMove="Resizing(event)" onMouseUp="stopResize(event)"></div>

</div>

</body>
</html>

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

历史上的今天

评论

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

页脚

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