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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 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
Protoss兵种介绍
2020/03/14 星际争霸
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
2014年仓库工作总结
2014/11/20 职场文书
中学社团活动总结
2015/05/07 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL