js开放层/关闭层/移动层的动画效果示例代码

CSS
复制代码代码如下所示：
体、跨度、div、TD {字体大小：12px；线高度：1.5em；颜色：# 849bca；}
# {浮动：左；SEALING封口宽度：84px；右边距：2px；}
a.od {宽80px；身高：25px；线高度：25px；文本对齐：中心；font-weight:大胆；边界：2px固体# 849bca；显示：块；显示：块；固体；}
A.od：链接{背景：# eef1f8；}
A.od：参观了{背景：# eef1f8；}
A.od：悬停{背景：# EEE；}
A.od：主动{背景：# EEE；}
# FD {宽度：500px；高度：200px；背景：# edf1f8边境：；2px固体# 849bca；边距：2px；margin-left: 2px；浮动：左；溢出：隐藏；位置：绝对；左：0px；顶部：0px；光标：移动；浮动：左； / *过滤器：α；* / }（不透明度50）
。内容{ padding: 10px；}

HTML
复制代码代码如下所示：

{开放层}
{封闭层}
移动层
JQ
复制代码代码如下所示：
无功特性；
Var Proy；
无功proxc；
无功proyc；
函数显示（id）{ * -打开
ClearInterval（PROX）；
ClearInterval（proy）；
ClearInterval（proxc）；
ClearInterval（proyc）；
var o = document.getelementbyid（ID）；
o.style.display =块；
o.style.width = 1px；
o.style.height = 1px；
PROX = setInterval（函数（）{ OpenX（O，500）}，10）；
}
功能OpenX（O，x）{ / *开放X * /
VaR CX = parseInt（o.style。宽度）；
如果（x x）
{
o.style.width =（CX + math.ceil（（（x-cx） / 5））+PX；
}
其他的
{
ClearInterval（PROX）；
proy = setInterval（function（）{同构对应性（O，200）}，10）；
}
}
功能同构对应性（O，Y）{ / * * /——打开——
VaR CY = parseInt（o.style。高度）；
如果（赛扬）
{
o.style.height =（环磷酰胺+ math.ceil（（（y-cy） / 5））+PX；
}
其他的
{
ClearInterval（proy）；
}
}
功能的闭环（ID）{ / * * / --封闭--
ClearInterval（PROX）；
ClearInterval（proy）；
ClearInterval（proxc）；
ClearInterval（proyc）；
var o = document.getelementbyid（ID）；
如果（o.style.display = =块）
{
proyc = setInterval（function（）{密切（O）}，10）；
}
}
功能紧密（o）{ / * * /——打开——
VaR CY = parseInt（o.style。高度）；
如果（0）
{
o.style.height =（环磷酰胺（CY math.ceil / 5））+PX；
}
其他的
{
ClearInterval（proyc）；
proxc = setInterval（function（）{ closex（O）}，10）；
}
}
功能closex（o）{ / *开放X * /
VaR CX = parseInt（o.style。宽度）；
如果（0）
{
o.style.width =（CX - math.ceil（CX / 5））+PX；
}
其他的
{
ClearInterval（proxc）；
o.style.display =没有；
}
}
鼠标拖动--------------------- * / / * -------------------------
VaR OD = document.getelementbyid（FD）；
VaR dx，dy，MX，我的存在；
无功odrag；
无功议= document.all真的假的；
document.onmousedown =功能（e）{
var E = E：事件；
如果（e.button（document.all = = 1：0））
{
运动=真；
}
}
document.onmouseup =函数（）{
运动= false；
odrag = ；
如果（议）
{
Od.releaseCapture（）；
od.filters.alpha.opacity = 100；
}
其他的
{
window.releaseevents（OD。MouseMove）；
od.style.opacity = 1；
}
}
/ /功能readymove（e）{
od.onmousedown =功能（e）{
这odrag =；
var E = E：事件；
如果（e.button（document.all = = 1：0））
{
MX = e.clientx；
我的e.clienty；
od.style.left = od.offsetleft +PX；
od.style.top = od.offsettop +PX；
如果（议）
{
Od.setCapture（）；
od.filters.alpha.opacity = 50；
}
其他的
{
window.captureevents（MouseMove事件。）；
od.style.opacity = 0.5；
}
警报（MX）；
警报（我）；
}
}
document.onmousemove =功能（e）{
var E = E：事件；
/ /警报（MRX）；
/ /警报（e.button）；
如果（= =真的存在odrag）
{
VaR MRX = e.clientx MX；
Var Mry = e.clienty -我；
od.style.left = parseInt（OD。风格。左）+ MRX +PX；
od.style.top = parseInt（OD。风格。顶部）+ MRY +PX；
MX = e.clientx；
我的e.clienty；
}
}