动画类$motion
例子: http://www.cncn.net/intro ; 基于动画类$motion。
以下是实现动画的代码:
=====css初始定位代码======
<style type="text/css">
#main{overflow:hidden}
#main .cn_net{left:-1000px; position:relative; overflow:hidden}
#main .cn_com{left:1000px; position:relative; overflow:hidden}
#main .regBtn{top:-300px;position:relative;opacity:0; filter:alpha(opacity=0)}
#logo,.betwBg,#main .info,#main .adPic{opacity:0; filter:alpha(opacity=0)}
#main .cn_net dd{position:relative; left:450px}
#main .cn_com dd{position:relative; left:-450px}
#main .MoreFn{top:100px; position:relative}
body{background-position:0 -50px}
</style>
=====Javascript代码,根据定位还原,将属性(width,height,top,left...)还原为初始值来达到效果======
<script type="text/javascript">
//顶部背景
loads.push(function(){
setTimeout(function(){$('>body').motion({backgroundPosition:{to:[0,0],from:[0,-50],ease:6}},15,function(){
$('#logo').motion({opacity:{to:1,from:0}},10);//Logo
$('#main.betwBg').motion({opacity:{to:1,from:0}},10);
});},200);
setTimeout(function(){$('#main.cn_net').motion({left:{to:0,ease:6}},20);},100);//欣旅通模块
setTimeout(function(){$('#main.cn_com').motion({left:{to:0,ease:6}},20);},100);//欣欣旅游
//注册按钮
setTimeout(function(){$('#main.regBtn').motion({top:{to:0,ease:9},opacity:{to:1,from:0}},40);},1200);
setTimeout(function(){$('#main.info').motion({opacity:{to:1,from:0}},10);},800);//主要信息
setTimeout(function(){$('#main.adPic').motion({opacity:{to:1,from:0}},10);},800);
setTimeout(function(){$('#main.MoreFn').each(function(){[this].motion({top:{to:0,ease:8}},20);})},800);
$('#main.cn_net>dd').each(function(i){var t=this;setTimeout(function(){[t].motion({left:{to:0,ease:6}},20);},500+i*100)});
$('#main.cn_com>dd').each(function(i){var t=this;setTimeout(function(){[t].motion({left:{to:0,ease:6}},20);},500+i*100)});
});
</script>
下面是动画类用到的代码:
代码中主要包含:
1.变量T是缓动算法
2.包含一些常用的方法
3.一个简单的Javascript选择器
4.$motion动画类
// JavaScript Document
function Extend(tgt,src){for(var i in src){tgt[i]=src[i]}return tgt};
function G(a){return typeof a==='string'?document.getElementById(a):a};
var loads=[];window.onload=function(){loads.each(function(){this()})};//加载完毕执行
Extend(Array.prototype,{
merge:function(arr){for(var i=0,l=arr.length;i<l;i++)this[this.length]=arr[i];return this},
each:function(f){for(var i=0,l=this.length;i<l;i++)f.call(this[i],i);return this},//basel(this,i)}});return this},
motion:function(options,times,callback){$motion.push(this[0],options,times,callback);return this}//动画方法添加到$元素中。
});
var _global=function(){
this.isIE=document.all?true:false;//是否是IE
this.isIE6=this.isIE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1]==6);//是否是IE6
};
_global.prototype={
extend:Extend,
css:function(e){return e.currentStyle||document.defaultView.getComputedStyle(e,null)},
//选择器:(rule,byId,byClass,byTag,byName,byType)。
rule:function(a,b){var e=[b||document];var types={'#':this.byId,'.':this.byClass,'>':this.byTagName,':':this.byType,'=':this.byName,'default':true},obj=[];for(var i=0,k=-1,l=a.length;i<l;i++){var s = a.charAt(i);if(typeof types[s]==='function'){k++;obj[k]=''}obj[k]+=s;}for(var i=0,l=obj.length;i<l;i++)e=types[obj[i].charAt(0)](e,obj[i].substr(1));return e},
byType:function(o,t){var tags=[];o.each(function(){if(this.type==t)tags.push(this);});return tags},
byId:function(o,t){return [o[0].getElementById(t)]},
byTagName:function(o,t){var tags=[];o.each(function(i){tags.merge(o[i].getElementsByTagName(t))});return tags;},
byClass:function(o,t){var _=[];o.each(function(i){var m=this.getElementsByTagName('*');for(var j=0,k=m.length;j<k;j++){if((' '+m[j].className+' ').indexOf(' '+t+' ')!==-1)_.push(m[j])}});return _;},
byName:function(o,t){var tags=[];o.each(function(i){tags.merge(o[i].getElementsByName(t))});return tags}
};
var $set=new _global();var $=function(a,b){return $set.rule(a,b);};Extend($,$set);
//T变量中是几个运动轨迹算法,比如篮球落地的轨迹,匀加速等
var T={circ:{1:function(t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;}},back:{1:function(t,b,c,d){if(s==undefined)var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;}},bounce:{1:function(t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else if(t<(2/2.75)) {return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)) {return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}}},linear:{1:function(t,b,c,d){ return c*t/d + b; }}};
//以下是$motion动画类的主要代码
var $motion=function(){
var t=this;
t.globalTimer=0;//定时器 setInterval.
t.items=[];//动画数组
t.delay=15;//动画执行频率
t.animate=['quad','cubic','quart','quint','sine','expo', 'circ','elastic','back','bounce','linear'];//运动算法类型
t.unusual=' backgroundPosition opacity ';//个别属性需要做特殊处理
t.onLoad();//初始化加载
};$motion.prototype={
onLoad:function(){
var t=this;
t.globalTimer=setInterval(function(){t.interval.call(t)},t.delay);
},
//这个就是每15(this.delay)毫秒执行一次的函数了
interval:function(){
var arr=this.items;
for(var j=(arr.length-1);j>=0;j--){
for(var i in this.items[j][1])this[this.items[j][1][i].fn](j,i);
if(++this.items[j][2]>this.items[j][3]){
var fn=this.items[j][4];
this.items.splice(j,1);
if(typeof fn==='function')fn();
}
}
},
//所有需要运动的元素以及其参数,都通过这个方法存入数组this.items中
push:function(obj,options,times,callback){
obj=G(obj);
callback=callback||false;
obj.style.display='block';
for(var i in options){
options[i]=Extend({from:false,ease:10,mode:1},options[i]);
options[i].fn=this.unusual.indexOf(' '+i+' ')===-1?'general':i;
options[i].motion = T[this.animate[options[i].ease]][options[i].mode];
if(options[i].from===false){
options[i].from = i=='backgroundPosition'?this.getBgPosVal(obj):parseInt($.css(obj)[i]);
if(isNaN(options[i].from)){
options[i].from = i=='height'?obj.offsetHeight:i=='width'?obj.offsetWidth:0;
}
}
if(i=='backgroundPosition')options[i].to=[options[i].to[0]-options[i].from[0],options[i].to[1]-options[i].from[1]];
else{options[i].to = options[i].to-options[i].from;}
//if(i=='opacity')alert($.css(obj)[$.isIE?'filter':'opacity']);
}
var opts=[obj,options,0,times,callback];
for(var i=0,l=this.items.length;i<l;i++){if(this.items[i][0]==obj){this.items[i] = opts;return}}
this.items.push(opts);
},
//获取元素的背景位置
getBgPosVal:function(obj){
var css=$.css(obj);
if($.isIE){
var o=[parseInt(css.backgroundPositionX),parseInt(css.backgroundPositionY)];
}else{
var o=css.backgroundPosition.split(' ');
var o=[parseInt(o[0]),parseInt(o[1])];
}
return o;
},
//常用的属性使用这个方法来设置元素的样式属性
general:function(j,i){
var e=this.items[j][1][i].motion(this.items[j][2],this.items[j][1][i].from,this.items[j][1][i].to,this.items[j][3]);
if((i=='width'||i=='height')&&e<0)e=0;
this.items[j][0].style[i] = e+'px';
},
//设置元素透明度
opacity:function(j,i){
var e=this.items[j][1][i].motion(this.items[j][2],this.items[j][1][i].from,this.items[j][1][i].to,this.items[j][3]);
var obj=$.isIE?['filter','alpha(opacity='+(e*100)+')']:['opacity',e];
this.items[j][0].style[obj[0]] = obj[1];
},
//设置元素的背景位置
backgroundPosition:function(j,i){
var a=this.items[j][1][i].motion(this.items[j][2],this.items[j][1][i].from[0],this.items[j][1][i].to[0],this.items[j][3]);
var b=this.items[j][1][i].motion(this.items[j][2],this.items[j][1][i].from[1],this.items[j][1][i].to[1],this.items[j][3]);
this.items[j][0].style.backgroundPosition = a+'px '+b+'px';
},
//停止动画
stop:function(){clearInterval(this.globalTimer)}
};$motion=new $motion;