首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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> 

JS动画效果代码3

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
AGC(1) AN-LP1(1) frg-100(1) 原神(1) BCLer(1) FS1016(1) 死亡搁浅(1) ICF-903L(1) 74HC4066(1) YB-230(1)
You might like
mysql建立外键
2006/11/25 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
ThinkPHP框架搭建及常见问题（XAMPP安装失败、Apache/MySQL启动失败）
2016/04/15 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python实现外卖信息管理系统
2018/01/11 Python
Python元组常见操作示例
2019/02/19 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python操作Jira库常用方法解析
2020/04/10 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
python主要用于哪些方向
2020/07/05 Python
团员个人的自我评价
2013/12/02 职场文书
事假请假条范文
2014/04/11 职场文书
学校社会实践活动总结
2014/07/03 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
颐和园导游词
2015/01/30 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书