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 相关文章推荐
12种不宜使用的Javascript语法整理
Nov 04 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
package.json文件配置详解
Jun 15 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
jquery实现轮播图特效
Apr 12 jQuery
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
JavaScript函数详解
2015/02/27 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python for循环中的陷阱详解
2018/07/13 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python 一维二维插值实例
2020/04/22 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
市场专员岗位职责
2014/02/14 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL