javascript 小型动画组件与实现代码

me){
window.flower = flower;
})(window,''flower'');

这样其实就是让内部函数自由，并且只通过这个调用去暴露一个接口。不然外面的函数，访问不到匿名函授中的flower;
看一下调用的例子 : )
复制代码 代码如下:
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>
<script>
(function($,name){
var parseEl = document.createElement(''div'')
,
props = (''backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth ''+
''borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize ''+
''fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight ''+
''maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft ''+
''paddingRight paddingTop right textIndent top width wordSpacing zIndex'').split('' '')
,
normalize =function (style){
var css,
rules = {},
i = props.length,
v;
parseEl.innerHTML = ''<div style="''+style+''"></div>'';
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
return rules;
},
color = function(source,target,pos){
var i = 2, j, c, tmp, v = [], r = [];
while(j=3,c=arguments[i-1],i--)
if(s(c,0)==''r'') { c = c.match(/\d+/g); while(j--) v.push(~~c[j]); } else {
if(c.length==4) c=''#''+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3);
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); }
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); }
return ''rgb(''+r.join('','')+'')'';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[\-\d\.]+/,'''');
return isNaN(p) ? { v: q, f: color, u: ''''} : { v: p, f: interpolate, u: q };
},
s = function(str, p, c){
return str.substr(p,c||1);
},
interpolate =function(source,target,pos){
return (source+(target-source)*pos).toFixed(3);
},
flower = function(el, style,opts,after){
var el = document.getElementById(el),
opts = opts || {},
target = normalize(style),
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null),
prop,
current = {},
start = +new Date,
dur = opts.duration||200,
finish = start+dur,
interval,
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };
for(prop in target) current[prop] = parse(comp[prop]);
interval = setInterval(function(){
var time = +new Date,
pos = time>finish ? 1 : (time-start)/dur;
for(prop in target){
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
}
if(time>finish) {
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1);
}
},10);
};
$[name] = flower;
})(window,"flower");
(function(){
var bounce = function(pos) {
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