基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享

摘要：前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有...

前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有高手能帮忙指点下我的写不足和错误，一直以来自己写的东西都是在用，性能方面个人只能尽量靠近问题还很多……真心求指点；

插件简介：执行渐隐等动画效果，可以这个插件为一个附加插件可以配合前面我发的一个弹出层等等之类的东西用增加js展示的趣味性，

使用方法：在下面的js代码里面前面写了，大家可以看看直接复制粘贴就可以用了有问题可以联系我</p

JS代码如下展示方式可以复制下面的HTML查看

[javascript]

复制代码代码如下:

createByTommy_20110525

emial:@csslife@163.com

用途：

执行渐隐等动画效果

传入参数说明：

1、第一个参数为需要变换对象或ID；

2、第二个参数为一个对象包含：

1)、sty->变换对象需要改变的属性，默认为改变宽度（也可以传非style的属性比如scrollTop等）

2)、curClass->变换对象完成改变后需要添加的当前类,默认为空

3)、maxVal->改变属于的最大值，默认为0（如果curClass为宽高等style属性表示隐藏），当这个要改变的属性值达到时停止动画

4)、effect->执行的动画效果默认为outQuad，如需弹跳效果将其值设置为2

3、最后个参数为可选参数表示当动画执行完毕后运行的回调函数

//animation

var ani = function(){this.init.apply(this,arguments)}

ani.prototype = {

_id:function(i){

if(!i) return;

return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i);

init:function(e,s,callback){

this.e = this._id(e);

this.setInit(s||{});

var maxS = parseInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s.sty),1):maxS/5;

this.fun(speed,maxS,callback)

formula:function(x){

var f;

switch(this.s.effect){

case 0:

f = "outQuad";

break;

case 1:

f = "inQuad";

break;

case 2:

f = "bounce";

break;

default:

f = "easeInBack";

}

this.tween ={

outQuad:function(pos){return Math.pow(pos, 2)},//outQuad

inQuad:function(pos){return -(Math.pow((pos-1),2)-1)},//inQuad

bounce:function(pos){//bounce

if (pos < (1 / 2.75)) {

return (7.5625 * pos * pos);

} else if (pos < (2 / 2.75)) {

return (7.5625 * (pos -= (1.5 / 2.75)) * pos + .75);

} else if (pos < (2.5 / 2.75)) {

return (7.5625 * (pos -= (2.25 / 2.75)) * pos + .9375);

} else {

return (7.5625 * (pos -= (2.625 / 2.75)) * pos + .984375);

}

easeInBack:function(pos){var s = 1.70158;return (pos) * pos * ((s + 1) * pos - s);}

};

return this.tween[f](x);

findAry:function(attr){

var rg = ["width","height","top","bottom","left","right","margin","padding"];

for(var z in rg){

if(rg[z]==attr) return true;

}

return false;

setInit:function(s){

this.s = {

sty:"width",

curClass:"",

maxVal:0,//效果最大值

effect:1//执行效果

}

for(i in s) this.s[i] = s[i];

setSty:function(x){

var attr = this.s.sty;

if(this.findAry(attr)){

this.e.style[attr] = x + 'px';

var isIE6 = navigator.appVersion.indexOf("MSIE 6")>-1;

isIE6&&attr=="top"&&(this.e.style[attr] = x + document.documentElement.scrollTop + 'px');

}else if(attr=="opacity"){

this.s.maxVal===1&&(this.e.style.display = "block");

this.e.style.opacity = x;

this.e.style.filter = "alpha(opacity="+x*100+")";

}else{

this.e[this.s.sty] = x

}

getSty:function(e,s){

var val = e.currentStyle?e.currentStyle[s]:document.defaultView.getComputedStyle(e,null)[s];

return parseInt(val)||0;

fun:function(f,m,callback){

var D = Date,t = new D,e,T = 500,_this = this;

return e = setInterval(function() {

var z = Math.min(1, (new D - t) / T),

c = _this.s.curClass,

curC = _this.e.className;

_this.setSty( + f + (m - f) * _this.formula(z));

if (z == 1) {

if (callback && typeof callback == 'function') callback();

_this.s.maxVal==0&&(_this.e.getAttribute("style"))&&(_this.e.style.display="none");

if(c!=""&&curC.indexOf(c)<0)_this.e.className += c;

clearInterval(e);

}

},10);

}

这是这个js展示的第一个DEMO1:

[html]

复制代码代码如下:

<!DOCTYPE HTML>

<html>

<head>

<style>

div,h6,body{padding:0;margin:0;}

div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}

.car-mod{position:relative;width:200px;}

.car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;}

.car-box{border:2px solid #c06;width:300px;display:none;}

.car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);}

.things{border-top:1px solid #ccc;padding:50px 15px;}

</style>

</head>

<body>

<h6>我的购物车</h6>

</div>

(function(){

//线上调用这个插件的时候直接调用animation.js这个是压缩了的

var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true;

//移入显示

carMod.onmouseover = function(even){

var even = even || window.event,target = even.target || even.srcElement;

if(target.className=="car-menu"){

!!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"},function(){carControl=false;}));

carObj = null;

}

//移出隐藏

this.onmouseout = function(even){

var e = even || window.event,

reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;

while (reltg && reltg != this){reltg = reltg.parentNode;}

if(reltg != this){

!carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;}));

carObj1 = null;

}

})()

</script>

</body>

</html>

这个是基于前面的那个弹出层的demo版本的效果，这个效果必须复制前面的弹出层的js哦部分代码如下

[html]

复制代码代码如下:

<!DOCTYPE HTML>

<html>

<head>

<title>弹出层事例</title>

<style>

div{padding:0;margin:0;}

.wra{margin:0 auto;width:1000px;overflow:hidden;}

.menu{border:1px solid #ccc;background:#000;color:#fff;width:250px;height:30px;font:14px/30px '微软雅黑';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;}

.con{border:1px solid #000;background:#fff;padding:30px;width:500px;height:200px;position:fixed;top:-150%;left:50%;margin:-100px 0 0 -250px;display:none;z-index:999;}

.close{display:block;position:absolute;right:10px;top:10px;cursor:pointer;font:bold 14px Arial;-moz-transition:-moz-transform .5s ease-in 0s;}

.close:hover{-moz-transform:rotate(360deg);}

</style>

<style>

</style>

</head>

<body>

<div>

<div id="J_popup">点击弹出层</div>

弹出层内容

</div>

var D = document,m = D.getElementById("J_popup"),con = D.getElementById("J_popup_con"),cl = D.getElementById("J_colse");

new Popup(m,con,cl,{addFun:function(){new ani("J_popup_con",{sty:"top",maxVal:"350",effect:2})},callBack:function(){con.style.display="block";new ani("J_popup_con",{sty:"top",maxVal:"0"})}})

</script>

</div>

</body>

</html>

【基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果分享】相关文章：

★ javascript实现图片跟随鼠标移动效果的方法

★ COOL而实用的动态效果

★ 多种js图片预加载实现方式分享

★ javascript转换静态图片，增加粒子动画效果

★ jQuery插件实现适用于移动端的地址选择器

★ jQuery的Scrollify插件实现滑动到页面下一节点

★ document对象execCommand的command参数介绍