JS动画效果代码2

Untitled Document

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • JS判断页面加载状态以及添加遮罩和缓冲动画的代码

    复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei

  • js运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

  • js动画(animate)简单引擎代码示例

    用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内

  • 图片的左右移动,js动画效果实现代码

    图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js动画效果打开层 关闭层

    DOM_text01 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:

  • 一个简单的js动画效果代码

    实现的功能:移动,暂停,恢复,停止. 未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...) 代码中的使用方法如下: 复制代码 代码如下: var $m = $M("divAnimate"); _("btnAnimate").onclick = function(){ this.disabled = true; var that = this; $m.animate({left:"300px",top:"100px

  • 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)

    复制代码 代码如下: <%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query&

  • 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>  &l

  • 用js模拟JQuery的show与hide动画函数代码

    复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute

  • 用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),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • js 排序动画模拟 冒泡排序

    而在某些场景中,队列确实像一支奇兵,可以带来不错的效果,比如配合定时器使用,可以模拟时间差效果 复制代码 代码如下: function createDq(){ var dq = [], size = 0; return { setDq:function(queue){ dq = queue; size = queue.length; }, queue:function(fn){ size ++; dq.push(fn); }, dqueue:function(){ size --; return

随机推荐