点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

JS动画效果代码2_javascript技巧

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

JS动画效果代码2_javascript技巧

JS动画效果代码2_javascript技巧: Untitled Document 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.of

推荐度：

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

导读JS动画效果代码2_javascript技巧: Untitled Document 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.of

<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"> 
 
</style> 
</head>

<body> 
 
 
 
</body> 
</html> 
 
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 = {}; 
 
 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 >= pObj.targetSize.w && h >= 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 < pObj.targetSize.w) 
 w += pObj.step.x; 
 if(h <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"; 
 } 
}

var ani = new JAni(); 
 ani.popup( 
 "apDiv1", 
 {w:50,h:50}, //初始长宽 
 {w:200,h:500}, //目标长宽 
 {x:8,y:8}, //步长 
 {s:10,e:80,t:10}//透明度 起始，结束，步长 
 ); 
 
 ani.popup( 
 "apDiv2", 
 {w:30,h:50}, //初始长宽 
 {w:400,h:400}, //目标长宽 
 {x:8,y:8}, //步长 
 {s:10,e:80,t:2}//透明度 起始，结束，步长 
 ); 
 
 ani.popup( 
 "apDiv3", 
 {w:10,h:10}, //初始长宽 
 {w:200,h:500}, //目标长宽 
 {x:8,y:8}, //步长 
 {s:10,e:80,t:10}//透明度 起始，结束，步长 
 ); 
</ script>

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

JS动画效果代码2_javascript技巧

JS动画效果代码2_javascript技巧: Untitled Document 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.of

推荐度：

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

标签：动画 js 代码

热门焦点

最新推荐

猜你喜欢

热门推荐

产品服务发展历程企业资讯企业文化关于我们加入我们联系我们网站导航网站律师

中国扫黄打非网

Copyright © 2019-2025 51dongshi.net 版权所有

赣ICP备2023002352号-34

违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务

Top