Js扩张效果
内容纲要
Javascript代码写起来太繁杂了！！！想转用 Actionscript ！！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>扩张效果</title>
<style type="text/css">
<!-- #apDiv1 {
position: absolute;
left: 300px;
top: 100px;
width: 100px;
height: 100px;
z-index: 1;
background-color: #FF00FF;
}
#apDiv2 {
position: absolute;
left: 402px;
top: 100px;
width: 100px;
height: 100px;
z-index: 2;
background-color: #00FFFF;
}
#apDiv3 {
position: absolute;
left: 402px;
top: 200px;
width: 100px;
height: 100px;
z-index: 3;
background-color: #99FF00;
}
#apDiv4 {
position: absolute;
left: 300px;
top: 200px;
width: 100px;
height: 100px;
z-index: 4;
background-color: #FFFF00;
}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<script language="javascript" type="text/javascript">
function $(pId) {
return document.getElementById(pId);
}
function IPos() {
}
IPos.getAbsPos = function(pTarget) {
var _x = 0;
var _y = 0;
while(pTarget.offsetParent) {
_x += pTarget.offsetLeft;
_y += pTarget.offsetTop;
pTarget = pTarget.offsetParent;
}
_x += pTarget.offsetLeft;
_y += pTarget.offsetTop;
return {
x: _x,
y: _y
};
}
function JAniObj() {
this.obj = null;
this.interval = null;
this.orgPos = null;
this.targetPos = null;
this.orgSize = {
w: 50,
y: 50
}; //初始长宽
this.targetSize = {
w: 100,
y: 100
}; //目标长宽
this.step = {
x: 10,
y: 10
}; //步长 x:x方向 y:y方向
this.alpha = {
s: 10,
e: 90,
t: 10
}; //透明度，s初始，e结束,t步长
}
function JAni() {
var self = this;
var aniObjs = {};
var getCurrentStyleProperty = function(pObj, pProperty) {
try {
if(pObj.currentStyle)
return eval("pObj.currentStyle." + pProperty);
else
return document.defaultView.getComputedStyle(pObj, "").getPropertyValue(pProperty);
} catch(e) {
alert(e);
}
}
this.popup = function(pDiv, pOrgSize, pTargetSize, pStep, pAlpha) {
var aniObj = new JAniObj();
aniObjs[pDiv] = aniObj;
with(aniObj) {
obj = $(pDiv);
orgPos = IPos.getAbsPos(obj);
orgSize = pOrgSize;
targetSize = pTargetSize;
step = pStep;
alpha = pAlpha;
with(obj.style) {
overflow = "hidden";
position = "absolute";
width = pOrgSize.w + "px";
height = pOrgSize.h + "px";
left = orgPos.x + "px";
top = orgPos.y + "px";
if(document.all) {
filter = "Alpha(opacity=" + pAlpha.s + ")";
} else
opacity = pAlpha.s / 100;
}
}
aniObj.interval = setInterval("popup_('" + pDiv + "')", 10);
}
popup_ = function(pDivId) {
pObj = aniObjs[pDivId];
var w = parseInt(pObj.obj.style.width);
var h = parseInt(pObj.obj.style.height);
if(w >= Math.abs(pObj.targetSize.w) && h >= Math.abs(pObj.targetSize.h)) {
clearInterval(pObj.interval);
if(document.all)
pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")";
else
pObj.obj.style.opacity = pObj.alpha.e / 100;
delete aniObjs[pObj.obj.id];
} else {
if(w < Math.abs(pObj.targetSize.w))
w += pObj.step.x;
if(h < Math.abs(pObj.targetSize.h))
h += pObj.step.y;
if(document.all) {
var pattern = /opacity=(\d{1,3})/;
var result = pattern.exec(pObj.obj.style.filter);
if(result != null) {
if(result[1] < pObj.alpha.e)
pObj.obj.style.filter = "Alpha(opacity=" + (result[1] + pObj.alpha.t) + ")"
else
pObj.obj.style.filter = "Alpha(opacity=" + pObj.alpha.e + ")";
}
} else {
if(pObj.obj.style.opacity < pObj.alpha.e / 100) {
pObj.obj.style.opacity = parseFloat(pObj.obj.style.opacity) + pObj.alpha.t / 100;
} else
pObj.obj.style.opacity = pObj.alpha.e / 100;
}
}
pObj.obj.style.width = w + "px";
pObj.obj.style.height = h + "px";
if(pObj.targetSize.w < 0) {
var vLeft = parseInt(getCurrentStyleProperty(pObj.obj, "left"));
vLeft = isNaN(vLeft) ? 0 : vLeft;
pObj.obj.style.left = vLeft - pObj.step.x + "px";
}
if(pObj.targetSize.h < 0) {
var vTop = parseInt(getCurrentStyleProperty(pObj.obj, "top"));
vTop = isNaN(vTop) ? 0 : vTop;
pObj.obj.style.top = vTop - pObj.step.y + "px";
}
}
}
var ani = new JAni();
ani.popup(
"apDiv1", {
w: 50,
h: 50
}, //初始长宽
{
w: 200,
h: 200
}, //目标长宽
{
x: 8,
y: 8
}, //步长
{
s: 10,
e: 80,
t: 10
} //透明度 起始，结束，步长
);
ani.popup(
"apDiv2", {
w: 50,
h: 50
}, //初始长宽
{
w: -200,
h: 200
}, //目标长宽
{
x: 8,
y: 8
}, //步长
{
s: 10,
e: 40,
t: 2
} //透明度 起始，结束，步长
);
ani.popup(
"apDiv3", {
w: 50,
h: 50
}, //初始长宽
{
w: -200,
h: -200
}, //目标长宽
{
x: 8,
y: 8
}, //步长
{
s: 10,
e: 40,
t: 10
} //透明度 起始，结束，步长
);
ani.popup(
"apDiv4", {
w: 50,
h: 50
}, //初始长宽
{
w: 200,
h: -200
}, //目标长宽
{
x: 8,
y: 8
}, //步长
{
s: 10,
e: 50,
t: 10
} //透明度 起始，结束，步长
);
</script>
</body>
</html>