繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS动画效果代码3
- Javascript
- javascript中的有名函数和无名函数
- javascript[js]获取url参数的代码
- javascript select 之间传值效果的代码
- js正则实现的密码框简单制作,还可以替换成自己想用得符号
- 脚本控制自适应高度的缩短问题
- 兼容ie和firefox版本的js反选 全选 多选框
- javascript 随机数 与高级应用 附vbscript(asp) 随机数总结
- 不用确认即可打印的javascript代码
- 推荐自用 Javascript 缩图函数 (onDOMLoaded)……
- 用javascript实现div可编辑的常见方法
- 用JavaScript实现的一个IP地址输入框
- 用javascript取得传递参数的个数的代码
- 当鼠标移出灰色区域时候,菜单项怎么隐藏起来
- 才发现的超链接js导致网页中GIF动画停止的解决方法
- javascript window.onerror事件学习新收获
- javascript 如何生成不重复的随机数
- 超个性的导航效果
- 不能再简单的无闪刷新验证码原理很简单
- 经常用到的javascript验证函数收集
- 用js实现手把手教你月入万刀(转贴)
Javascript 中的 JS动画效果代码3
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 163 ::
收藏到网摘: n/a
用js实现的动画效果 慢慢来，这次实现了向任意方向扩展！
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</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>
</body>
</html>
<script language="javascript" type="text/javascript">
function $(pId){
return document.getElementById(pId);
}
function JPos(){
}
JPos.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 = JPos.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>
评论 (0) All
