JS动画效果代码2- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS动画效果代码2

Javascript: JMenuTab简单使用说明; 简单的JS多重继承示例; js另类写法; javascript cookie解码函数（兼容ff）; Javascript的一种模块模式; 详解new function(){}和function(){}() 区别分析; YUI 读码日记之 YAHOO.lang.is*; 用JS得到字符串中出现次数最多的字母; YUI 读码日记之 YAHOO.util.Dom - Part.1; Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0; Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3; javascript YUI 读码日记之 YAHOO.util.Dom - Part.4; 利用js对象弹出一个层; js用图作提交按钮或超连接; 通过 Dom 方法提高 innerHTML 性能; javascript 通用滑动门tab类; 二行代码解决全部网页木马; JavaScript的面向对象方法以及差别; 悟透JavaScript整理版; try finally 妙用,防止内存泄漏

No. « ‹ 94 95 96 97 › »

技术文章搜索

关键字

Javascript 中的 JS动画效果代码2

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 99 ::

收藏到网摘: n/a

CSS常用网站布局实例 JS动画效果代码3

用js实现的图片生成效果代码，学习js的朋友可以看看

点击运行可以看到效果:

<!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">
</style>
</head>
<body> <div id="apDiv1"></div> <div id="apDiv2"></div>
<div id="apDiv3"></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 = {}; 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 >= pObj.targetSize.w && h >= 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 < pObj.targetSize.w) w += pObj.step.x; if(h <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"; }
}
var ani = new JAni(); ani.popup( "apDiv1", {w:50,h:50}, //初始长宽 {w:200,h:500}, //目标长宽 {x:8,y:8}, //步长 {s:10,e:80,t:10}//透明度 起始，结束，步长 ); ani.popup( "apDiv2", {w:30,h:50}, //初始长宽 {w:400,h:400}, //目标长宽 {x:8,y:8}, //步长 {s:10,e:80,t:2}//透明度 起始，结束，步长 ); ani.popup( "apDiv3", {w:10,h:10}, //初始长宽 {w:200,h:500}, //目标长宽 {x:8,y:8}, //步长 {s:10,e:80,t:10}//透明度 起始，结束，步长 );
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

CSS常用网站布局实例 JS动画效果代码3

Javascript 中的 JS动画效果代码2

评论 (0) All