JS动画效果代码3


Posted in Javascript onApril 03, 2008

慢慢来,这次实现了向任意方向扩展!

<!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> 
Javascript 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
CSS常用网站布局实例
Apr 03 #Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 #Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 #Javascript
JavaScript的面向对象方法以及差别
Mar 31 #Javascript
二行代码解决全部网页木马
Mar 28 #Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 #Javascript
js用图作提交按钮或超连接
Mar 26 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
请离开include_once和require_once
2013/07/18 PHP
PHP时间和日期函数详解
2015/05/08 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
python 识别图片中的文字信息方法
2018/05/10 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
EJB的基本架构
2016/09/22 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
百日安全活动总结
2014/05/04 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
辩护词范文大全
2015/05/21 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL
redis lua限流算法实现示例
2022/07/15 Redis