JS动画效果代码3
<!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实现文字的聚合动画效果
前言 所谓文字聚合效果,原理就是将容器分为若干的小块,然后每个小块设置 background-poisition ,最后添加css3动画就可以了,去掉注释,也就仅仅20行的代码. 先来看看效果图: js代码如下: //c为列数,r为行数,把box划分成多少个小块 var box = document.querySelector('.boxWrap1'),c=4,r=8; //每个小块的宽高 var w = box.offsetWidth/c,h = box.offsetHeight/r; //循
-
javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉得win7.win8没xp好用.但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的.但手机硬件处理能力却又十分有限.在四核.八核手机横行的今天,依然有像我这样使用双核或单核手机的.js虽好,单奈何接触不多,调不好那种感觉.一个简单的页面滑动,在i7的pc上运行十分流畅,可是,
-
JS实现自定义状态栏动画文字效果示例
本文实例讲述了JS实现自定义状态栏动画文字效果.分享给大家供大家参考,具体如下: 在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字. <body onload="stack();"> <script type="text/javascript"> var statusText="自定义动画状态栏文字"; var out=""; var pause=100; var animateWidth
-
javascript制作loading动画效果 loading效果
复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left
-
js+css实现文字散开重组动画特效代码分享
文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l
-
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei
-
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/x
-
js动画(animate)简单引擎代码示例
用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内
-
JS实现超炫网页烟花动画效果的方法
本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
用js实现的模拟jquery的animate自定义动画(2.5K)
后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画
-
js实现类似jquery里animate动画效果的方法
本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio