很棒的时间线控件

原生态javascript，希望大家能喜欢

function Gametimeline(){var c=document,a=arguments.callee,b=this;b.parent=c.getElementById("GameModuleTimeline"),b.hand=c.getElementById("GametimelineHandler"),b.handler=b.hand.getElementsByTagName("b"),b.date=b.hand.getElementsByTagName("span"),b.container=c.getElementById("GameModuleTimelineContainer"),b.pointer=c.getElementById("GametimelinePointer");!a.cache&&(a.cache=[[],[],[]]);if(b.container.children.length!==b.handler.length){return false}!this.parseDate&&(a.prototype.parseDate=function(){var g=0,d=b.handler.length,e=[];for(;g<d;){var h=b.handler[g],f=new Function("return"+("["+b.date[g].innerHTML.replace(/\./gi,",")+"]"))();b[g]=+new Date(f[0],f[1],f[2]);b.length=g;h.style.left="";void function(i,k){b.addEvent(k,"mouseover",function(){b.activity.call(k,i)},false)}(g++,h)}return b});a.prototype.locateHandler=function(){var f=(b[b.length]-b[0])/86400000,g=0,d=b.handler.length,e=0;for(;g<d;){e=((b[g]-b[0])/(f*86400000))*b.parent.offsetWidth;b.fx(b.handler[g],"left",((g===d-1||g===0)?e-20:e),50);g++}};a.prototype.Linear=function(f,e,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+e}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+e}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+e}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+e}}}};a.prototype.fx=function(e,p,m,l){var n=0,m=m||50,l=l||100,q=0,f=0,g=10,h=0;void function(){e.style[p]=Math.ceil(b.Linear(q,n,m,l))+"px";if(parseInt(e.style[p])<m){q++;setTimeout(arguments.callee,10)}}()};a.prototype.activity=function(g){var j=Array.prototype.slice,f=b.date,h=f[g],e=b.container,k=e.children[g],i=b.getClinetRect(this),d=b.getClinetRect(b.container);!a.cache[0][g]&&(a.cache[0][g]="visibility:visible;left:"+(parseInt(this.style.left)-f[0].offsetWidth/2+this.offsetWidth/2+"px"));if(!a.cache[1][g]){if((i.left-k.offsetWidth/2)<d.left){a.cache[1][g]="visibility:visible;left:0px;"}else{if((i.left+k.offsetWidth/2)>d.right){a.cache[1][g]="visibility:visible;left:"+(d.right-k.offsetWidth-d.left)+"px;"}else{a.cache[1][g]="visibility:visible;left:"+(i.left-k.offsetWidth/2-d.left)+"px;"}}}!a.cache[2][g]&&(a.cache[2][g]=("visibility:visible;left:"+(parseInt(this.style.left)-b.pointer.offsetWidth/2+this.offsetWidth/2)+"px; z-index:60;"));b.off.call(this,g);this.className="GametimelineOn";h.style.cssText=a.cache[0][g];b.fx(h,"top",15,80);!window.ActiveXObject&&(b.fadeIn.call(h,50),b.fadeIn.call(k,50));k.style.cssText=a.cache[1][g];b.pointer.style.cssText=a.cache[2][g]};a.prototype.off=function(e){var f=0,d=b.handler.length;for(;f<d;){if(f!==e){b.date[f].style.visibility="hidden",b.container.children[f].style.visibility="hidden";b.handler[f].className="GametimelineOff"}f++}};a.prototype.getClinetRect=function(f){var d=f.getBoundingClientRect(),e=(e={left:d.left,right:d.right,top:d.top,bottom:d.bottom,height:(d.height?d.height:(d.bottom-d.top)),width:(d.width?d.width:(d.right-d.left))});return e};a.prototype.fadeIn=function(d,e){b.doFade.call(this,d/10,0,true,e)};a.prototype.doFade=function(d,j,i,g){var k=undefined!==window.ActiveXObject,f=arguments.callee,e=this,h;j+=(i?1:-1)/d,(i?j>1:j<0)&&(j=i?1:0),k===true?e.style.filter="alpha(opacity="+j*100+")":e.style.opacity=j;(i?j<1:j>0)&&setTimeout(function(){f.call(e,d,j,i,g)},1000/d);(i?j===1:j===0&&"undefined"!==typeof g)&&("function"===typeof g&&g.call(e))};a.prototype.addEvent=function(h,g,f,e){var d=arguments.callee;h.attachEvent&&(d=function(k,j,i){k.attachEvent("on"+j,i)}).apply(this,arguments);h.addEventListener&&(d=function(k,j,i){k.addEventListener(j,i,e||false)}).apply(this,arguments);h["on"+g]&&(d=function(k,j,i){k["on"+j]=function(){i()}}).apply(this,arguments)};a.prototype.trigger=function(f,e){var d,g=document;undefined!==g.createEvent?(d=g.createEvent("MouseEvents"),d.initMouseEvent(e,true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null),f.dispatchEvent(d)):(d=g.createEventObject(),d.screenX=100,d.screenY=0,d.clientX=0,d.clientY=0,d.ctrlKey=false,d.altKey=false,d.shiftKey=false,d.button=false,f.fireEvent("on"+e,d))};return{init:function(d){b.parseDate();b.locateHandler();b.trigger(b.handler[d],"mouseover")}}};
	new Gametimeline().init(0);

评论

1 楼 percy30856 2011-06-24  

菲哥 你的头像，应该换成未满18岁禁止查看