DIV层之拖动、关闭、打开效果代码_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:54

DIV层之拖动、关闭、打开效果代码_javascript技巧

DIV层之拖动、关闭、打开效果代码_javascript技巧: div托动，打开，关闭效果 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-h

推荐度：

点击下载本文 文档为doc格式

导读DIV层之拖动、关闭、打开效果代码_javascript技巧: div托动，打开，关闭效果 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-h

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>div托动，打开，关闭效果</title> 
<style type="text/css"> 
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} 
#bodyL{ 
float:left; 
width:84px; 
margin-right:2px; 
} 
a.od{ 
width:80px; 
height:25px; 
line-height:25px; 
text-align:center; 
font-weight:bold; 
border: 2px solid #849BCA; 
display:block; 
color:#547BC9; 
float:left; 
text-decoration:none; 
margin-top:2px; 
} 
a.od:link{ 
background:#EEF1F8; 
} 
a.od:visited{ 
background:#EEF1F8; 
} 
a.od:hover{ 
background:#EEE; 
} 
a.od:active{ 
background:#EEE; 
} 
#fd{ 
width:500px; 
height:200px; 
background:#EDF1F8; 
border: 2px solid #849BCA; 
margin-top:2px; 
margin-left:2px; 
float:left; 
overflow:hidden; 
position:absolute; 
left:0px; 
top:0px; 
cursor:move; 
float:left; 
/*filter:alpha(opacity=50);*/

} 
.content{ 
padding:10px; 
} 
</style> 
</head> 
<body> 
 
 
[打开层] 
 
 
[关闭层] 
 
 
 
移动层

var prox; 
var proy; 
var proxc; 
var proyc; 
function show(id){/*--打开--*/ 
clearInterval(prox); 
clearInterval(proy); 
clearInterval(proxc); 
clearInterval(proyc); 
var o = document.getElementById(id); 
o.style.display = "block"; 
o.style.width = "1px"; 
o.style.height = "1px"; 
prox = setInterval(function(){openx(o,500)},10); 
} 
function openx(o,x){/*--打开x--*/ 
var cx = parseInt(o.style.width); 
if(cx < x) 
{ 
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px"; 
} 
else 
{ 
clearInterval(prox); 
proy = setInterval(function(){openy(o,200)},10); 
} 
} 
function openy(o,y){/*--打开y--*/ 
var cy = parseInt(o.style.height); 
if(cy < y) 
{ 
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px"; 
} 
else 
{ 
clearInterval(proy); 
} 
} 
function closeed(id){/*--关闭--*/ 
clearInterval(prox); 
clearInterval(proy); 
clearInterval(proxc); 
clearInterval(proyc); 
var o = document.getElementById(id); 
if(o.style.display == "block") 
{ 
proyc = setInterval(function(){closey(o)},10); 
} 
} 
function closey(o){/*--打开y--*/ 
var cy = parseInt(o.style.height); 
if(cy > 0) 
{ 
o.style.height = (cy - Math.ceil(cy/5)) +"px"; 
} 
else 
{ 
clearInterval(proyc); 
proxc = setInterval(function(){closex(o)},10); 
} 
} 
function closex(o){/*--打开x--*/ 
var cx = parseInt(o.style.width); 
if(cx > 0) 
{ 
o.style.width = (cx - Math.ceil(cx/5)) +"px"; 
} 
else 
{ 
clearInterval(proxc); 
o.style.display = "none"; 
} 
}

/*-------------------------鼠标拖动---------------------*/ 
var od = document.getElementById("fd"); 
var dx,dy,mx,my,mouseD; 
var odrag; 
var isIE = document.all ? true : false; 
document.onmousedown = function(e){ 
var e = e ? e : event; 
if(e.button == (document.all ? 1 : 0)) 
{ 
mouseD = true; 
} 
} 
document.onmouseup = function(){ 
mouseD = false; 
odrag = ""; 
if(isIE) 
{ 
od.releaseCapture(); 
od.filters.alpha.opacity = 100; 
} 
else 
{ 
window.releaseEvents(od.MOUSEMOVE); 
od.style.opacity = 1; 
} 
}

//function readyMove(e){ 
od.onmousedown = function(e){ 
odrag = this; 
var e = e ? e : event; 
if(e.button == (document.all ? 1 : 0)) 
{ 
mx = e.clientX; 
my = e.clientY; 
od.style.left = od.offsetLeft + "px"; 
od.style.top = od.offsetTop + "px"; 
if(isIE) 
{ 
od.setCapture(); 
od.filters.alpha.opacity = 50; 
} 
else 
{ 
window.captureEvents(Event.MOUSEMOVE); 
od.style.opacity = 0.5; 
}

//alert(mx); 
//alert(my);

} 
} 
document.onmousemove = function(e){ 
var e = e ? e : event;

//alert(mrx); 
//alert(e.button); 
if(mouseD==true && odrag) 
{ 
var mrx = e.clientX - mx; 
var mry = e.clientY - my; 
od.style.left = parseInt(od.style.left) +mrx + "px"; 
od.style.top = parseInt(od.style.top) + mry + "px"; 
mx = e.clientX; 
my = e.clientY;

} 
}

</ script> 
<脚本之家 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

DIV层之拖动、关闭、打开效果代码_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：关闭 js 代码

热门焦点

DIV层之拖动、关闭、打开效果代码_javascript技巧

DIV层之拖动、关闭、打开效果代码_javascript技巧

DIV层之拖动、关闭、打开效果代码_javascript技巧

最新推荐

猜你喜欢

热门推荐