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 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
Javascript实现字数统计
2015/07/03 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
CSS3 边框效果
2019/11/04 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
2013的个人自我评价
2013/12/26 职场文书
总经理检讨书
2014/09/15 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
施工现场安全管理制度
2015/08/05 职场文书
导游词之清晏园
2019/11/22 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers