- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>1</title>
- <metahttp-equiv="imagetoolbar"content="no">
- <styletype="text/css">
- html{
- overflow:hidden;
- }
- body{
- margin:0px;
- padding:0px;
- background:#000;
- width:100%;
- height:100%;
- }
- #imageFlow{
- position:absolute;
- width:100%;
- height:80%;
- left:0%;
- top:10%;
- background:#000;
- }
- #imageFlow.diapo{
- position:absolute;
- left:-1000px;
- cursor:pointer;
- -ms-interpolation-mode:nearest-neighbor;
- }
- #imageFlow.link{
- border:dotted#fff1px;
- margin-left:-1px;
- margin-bottom:-1px;
- }
- #imageFlow.bank{
- visibility:hidden;
- }
- #imageFlow.top{
- position:absolute;
- width:100%;
- height:40%;
- background:#181818;
- }
- #imageFlow.text{
- position:absolute;
- left:0px;
- width:100%;
- bottom:16%;
- text-align:center;
- color:#FFF;
- font-family:verdana,arial,Helvetica,sans-serif;
- z-index:1000;
- }
- #imageFlow.title{
- font-size:0.9em;
- font-weight:bold;
- }
- #imageFlow.legend{
- font-size:0.8em;
- }
- #imageFlow.scrollbar{
- position:absolute;
- left:10%;
- bottom:10%;
- width:80%;
- height:16px;
- z-index:1000;
- }
- #imageFlow.track{
- position:absolute;
- left:1%;
- width:98%;
- height:16px;
- filter:alpha(opacity=30);
- opacity:0.3;
- }
- #imageFlow.arrow-left{
- position:absolute;
- }
- #imageFlow.arrow-right{
- position:absolute;
- right:0px;
- }
- #imageFlow.bar{
- position:absolute;
- height:16px;
- left:25px;
- }
- </style>
- <scripttype="text/javascript">
- varimf=function(){
- varlf=0;
- varinstances=[];
- functiongetElementsByClass(object,tag,className){
- varo=object.getElementsByTagName(tag);
- for(vari=0,n=o.length,ret=[];i<n;i++)
- if(o[i].className==className)ret.push(o[i]);
- if(ret.length==1)retret=ret[0];
- returnret;
- }
- functionaddEvent(o,e,f){
- if(window.addEventListener)o.addEventListener(e,f,false);
- elseif(window.attachEvent)r=o.attachEvent('on'+e,f);
- }
- functioncreateReflexion(cont,img){
- varflx=false;
- if(document.createElement("canvas").getContext){
- flx=document.createElement("canvas");
- flx.width=img.width;
- flx.height=img.height;
- varcontext=flx.getContext("2d");
- context.translate(0,img.height);
- context.scale(1,-1);
- context.drawImage(img,0,0,img.width,img.height);
- context.globalCompositeOperation="destination-out";
- vargradient=context.createLinearGradient(0,0,0,img.height*2);
- gradient.addColorStop(1,"rgba(255,255,255,0)");
- gradient.addColorStop(0,"rgba(255,255,255,1)");
- context.fillStyle=gradient;
- context.fillRect(0,0,img.width,img.height*2);
- }else{
- /*----DXImageTransform----*/
- flx=document.createElement('img');
- flx.src=img.src;
- flx.style.filter='flipvprogid:DXImageTransform.Microsoft.Alpha('+
- 'opacity=50,style=1,finishOpacity=0,startx=0,starty=0,finishx=0,finishy='+
- (img.height*.25)+')';
- }
- /*----insertReflexion----*/
- flx.style.position='absolute';
- flx.style.left='-1000px';
- cont.appendChild(flx);
- returnflx;
- }
- /*====ImageFlowConstructor====*/
- functionImageFlow(oCont,size,zoom,border){
- this.diapos=[];
- this.scr=false;
- this.size=size;
- this.zoom=zoom;
- this.bdw=border;
- this.oCont=oCont;
- this.oc=document.getElementById(oCont);
- this.scrollbar=getElementsByClass(this.oc,'div','scrollbar');
- this.text=getElementsByClass(this.oc,'div','text');
- this.title=getElementsByClass(this.text,'div','title');
- this.legend=getElementsByClass(this.text,'div','legend');
- this.bar=getElementsByClass(this.oc,'img','bar');
- this.arL=getElementsByClass(this.oc,'img','arrow-left');
- this.arR=getElementsByClass(this.oc,'img','arrow-right');
- thisthis.bw=this.bar.width;
- thisthis.alw=this.arL.width-5;
- thisthis.arw=this.arR.width-5;
- thisthis.bar.parent=this.oc.parent=this;
- thisthis.arL.parent=this.arR.parent=this;
- thisthis.view=this.back=-1;
- this.resize();
- this.oc.onselectstart=function(){returnfalse;}
- /*----createimages----*/
- varimg=getElementsByClass(this.oc,'div','bank').getElementsByTagName('a');
- this.NF=img.length;
- for(vari=0,o;o=img[i];i++){
- this.diapos[i]=newDiapo(this,i,
- o.rel,
- o.title||'-'+i+'-',
- o.innerHTML||o.rel,
- o.href||'',
- o.target||'_self'
- );
- }
- /*====addmousewheelevents====*/
- if(window.addEventListener)
- this.oc.addEventListener('DOMMouseScroll',function(e){
- this.parent.scroll(-e.detail);
- },false);
- elsethis.oc.onmousewheel=function(){
- this.parent.scroll(event.wheelDelta);
- }
- /*====scrollbardragNdrop====*/
- this.bar.onmousedown=function(e){
- if(!e)e=window.event;
- varscl=e.screenX-this.offsetLeft;
- varself=this.parent;
- /*----movebar----*/
- this.parent.oc.onmousemove=function(e){
- if(!e)e=window.event;
- self.bar.style.left=Math.round(Math.min((self.ws-self.arw-self.bw),Math.max(self.alw,e.screenX-scl)))+'px';
- self.view=Math.round(((e.screenX-scl))/(self.ws-self.alw-self.arw-self.bw)*self.NF);
- if(self.view!=self.back)self.calc();
- returnfalse;
- }
- /*----releasescrollbar----*/
- this.parent.oc.onmouseup=function(e){
- self.oc.onmousemove=null;
- returnfalse;
- }
- returnfalse;
- }
- /*====rightarrow====*/
- thisthis.arR.onclick=this.arR.ondblclick=function(){
- if(this.parent.view<this.parent.NF-1)
- this.parent.calc(1);
- }
- /*====Leftarrow====*/
- thisthis.arL.onclick=this.arL.ondblclick=function(){
- if(this.parent.view>0)
- this.parent.calc(-1);
- }
- }
- /*====ImageFlowprototype====*/
- ImageFlow.prototype={
- /*====targets====*/
- calc:function(inc){
- if(inc)this.view+=inc;
- vartw=0;
- varlw=0;
- varo=this.diapos[this.view];
- if(o&&o.loaded){
- /*----reset----*/
- varob=this.diapos[this.back];
- if(ob&&ob!=o){
- ob.img.className='diapo';
- ob.z1=1;
- }
- /*----updatelegend----*/
- this.title.replaceChild(document.createTextNode(o.title),this.title.firstChild);
- this.legend.replaceChild(document.createTextNode(o.text),this.legend.firstChild);
- /*----updatehyperlink----*/
- if(o.url){
- o.img.className='diapolink';
- window.status='hyperlink:'+o.url;
- }else{
- o.img.className='diapo';
- window.status='';
- }
- /*----calculatetargetsizes&positions----*/
- o.w1=Math.min(o.iw,this.wh*.5)*o.z1;
- varx0=o.x1=(this.wh*.5)-(o.w1*.5);
- varx=x0+o.w1+this.bdw;
- for(vari=this.view+1,o;o=this.diapos[i];i++){
- if(o.loaded){
- o.x1=x;
- o.w1=(this.ht/o.r)*this.size;
- x+=o.w1+this.bdw;
- tw+=o.w1+this.bdw;
- }
- }
- x=x0-this.bdw;
- for(vari=this.view-1,o;o=this.diapos[i];i--){
- if(o.loaded){
- o.w1=(this.ht/o.r)*this.size;
- o.x1=x-o.w1;
- x-=o.w1+this.bdw;
- tw+=o.w1+this.bdw;
- lw+=o.w1+this.bdw;
- }
- }
- /*----movescrollbar----*/
- if(!this.scr&&tw){
- varr=(this.ws-this.alw-this.arw-this.bw)/tw;
- this.bar.style.left=Math.round(this.alw+lw*r)+'px';
- }
- /*----savepreviewview----*/
- thisthis.back=this.view;
- }
- },
- /*====mousewheelscrolling====*/
- scroll:function(sc){
- if(sc<0){
- if(this.view<this.NF-1)this.calc(1);
- }else{
- if(this.view>0)this.calc(-1);
- }
- },
- /*====resize====*/
- resize:function(){
- thisthis.wh=this.oc.clientWidth;
- thisthis.ht=this.oc.clientHeight;
- thisthis.ws=this.scrollbar.offsetWidth;
- this.calc();
- this.run(true);
- },
- /*====moveallimages====*/
- run:function(res){
- vari=this.NF;
- while(i--)this.diapos[i].move(res);
- }
- }
- /*====DiapoConstructor====*/
- Diapo=function(parent,N,src,title,text,url,target){
- this.parent=parent;
- this.loaded=false;
- this.title=title;
- this.text=text;
- this.url=url;
- this.target=target;
- this.N=N;
- this.img=document.createElement('img');
- this.img.src=src;
- thisthis.img.parent=this;
- this.img.className='diapo';
- thisthis.x0=this.parent.oc.clientWidth;
- thisthis.x1=this.x0;
- this.w0=0;
- this.w1=0;
- this.z1=1;
- thisthis.img.parent=this;
- this.img.onclick=function(){this.parent.click();}
- this.parent.oc.appendChild(this.img);
- /*----displayexternallink----*/
- if(url){
- this.img.onmouseover=function(){this.className='diapolink';}
- this.img.onmouseout=function(){this.className='diapo';}
- }
- }
- /*====Diapoprototype====*/
- Diapo.prototype={
- /*====HTMLrendering====*/
- move:function(res){
- if(this.loaded){
- varsx=this.x1-this.x0;
- varsw=this.w1-this.w0;
- if(Math.abs(sx)>2||Math.abs(sw)>2||res){
- /*----paintonlywhenmoving----*/
- this.x0+=sx*.1;
- this.w0+=sw*.1;
- if(this.x0<this.parent.wh&&this.x0+this.w0>0){
- /*----paintonlyvisibleimages----*/
- this.visible=true;
- varo=this.img.style;
- varh=this.w0*this.r;
- /*----diapo----*/
- o.left=Math.round(this.x0)+'px';
- o.bottom=Math.floor(this.parent.ht*.25)+'px';
- o.width=Math.round(this.w0)+'px';
- o.height=Math.round(h)+'px';
- /*----reflexion----*/
- if(this.flx){
- varo=this.flx.style;
- o.left=Math.round(this.x0)+'px';
- o.top=Math.ceil(this.parent.ht*.75+1)+'px';
- o.width=Math.round(this.w0)+'px';
- o.height=Math.round(h)+'px';
- }
- }else{
- /*----disableinvisibleimages----*/
- if(this.visible){
- this.visible=false;
- this.img.style.width='0px';
- if(this.flx)this.flx.style.width='0px';
- }
- }
- }
- }else{
- /*====imageonload====*/
- if(this.img.complete&&this.img.width){
- /*----getsizeimage----*/
- thisthis.iw=this.img.width;
- thisthis.ih=this.img.height;
- thisthis.r=this.ih/this.iw;
- this.loaded=true;
- /*----createreflexion----*/
- this.flx=createReflexion(this.parent.oc,this.img);
- if(this.parent.view<0)thisthis.parent.view=this.N;
- this.parent.calc();
- }
- }
- },
- /*====diapoonclick====*/
- click:function(){
- if(this.parent.view==this.N){
- /*----clickonzoomeddiapo----*/
- if(this.url){
- /*----openhyperlink----*/
- window.open(this.url,this.target);
- }else{
- /*----zoomin/out----*/
- thisthis.z1=this.z1==1?this.parent.zoom:1;
- this.parent.calc();
- }
- }else{
- /*----selectdiapo----*/
- thisthis.parent.view=this.N;
- this.parent.calc();
- }
- returnfalse;
- }
- }
- /*====publicmethods====*/
- return{
- /*====initializescript====*/
- create:function(div,size,zoom,border){
- /*----instanciateimageFlow----*/
- varload=function(){
- varloaded=false;
- vari=instances.length;
- while(i--)if(instances[i].oCont==div)loaded=true;
- if(!loaded){
- /*----pushnewimageFlowinstance----*/
- instances.push(
- newImageFlow(div,size,zoom,border)
- );
- /*----initscript(once)----*/
- if(!imf.initialized){
- imf.initialized=true;
- /*----windowresizeevent----*/
- addEvent(window,'resize',function(){
- vari=instances.length;
- while(i--)instances[i].resize();
- });
- /*----stopdragNdrop----*/
- addEvent(document.getElementById(div),'mouseout',function(e){
- if(!e)e=window.event;
- vartg=e.relatedTarget||e.toElement;
- if(tg&&tg.tagName=='HTML'){
- vari=instances.length;
- while(i--)instances[i].oc.onmousemove=null;
- }
- returnfalse;
- });
- /*----setintervalloop----*/
- setInterval(function(){
- vari=instances.length;
- while(i--)instances[i].run();
- },16);
- }
- }
- }
- /*----windowonloadevent----*/
- addEvent(window,'load',function(){load();});
- }
- }
- }();
- /*====createimageFlow====*/
- //divID,size,zoom,border
- imf.create("imageFlow",0.15,1.5,10);
- </script>
- </head>
- <body>
- <divid="imageFlow">
- <divclass="top"></div>
- <divclass="bank">
- <arel="ct37.jpg"title="Myselves"href="http://www.design-studio.cn/">MyidentityliesinnotknowingwhoIam</a>
- <arel="ct60.jpg"title="Discoveries"href="http://www.design-studio.cn/">...aremadebynotfollowinginstructions</a>
- <arel="sf53.jpg"title="Nothing"href="http://www.design-studio.cn/">...cancomebetweenus</a>
- <arel="sf48.jpg"title="Newlife"href="http://www.design-studio.cn/">Hereyoucome!</a>
- <arel="ct81.jpg"title="Optimists"href="http://www.design-studio.cn/">Theydon'tknowallthefactsyet</a>
- <arel="ct134.jpg"title="Empathy"href="http://www.design-studio.cn/">Emotionalintimacy</a>
- <arel="ct41.jpg"title="Muchwork"href="http://www.design-studio.cn/">...remainstobedonebeforewecanannounceourtotalfailuretomakeanyprogress</a>
- <arel="ct75.jpg"title="Systemerror"href="http://www.design-studio.cn/">ErrareProgrammaEst</a>
- <arel="bl201.jpg"title="Nonexistance"href="http://www.design-studio.cn/">There'snosuchthing</a>
- <arel="ct137.jpg"title="Inside"href="http://www.design-studio.cn/">I抦nowtrapped,withouthopeofescapeorrescue</a>
- <arel="ct65.jpg"title="E-Slaves"href="http://www.design-studio.cn/">TheWorldisflat</a>
- <arel="or105.jpg"title="l0v3"href="http://www.design-studio.cn/">1l0v3j00-f0r3v3r</a>
- <arel="ct139.jpg"title="Tminuszero"href="http://www.design-studio.cn/">111111111x111111111=12345678987654321</a>
- <arel="ct27.jpg"title="TheEnd"href="http://www.design-studio.cn/">...hasnotbeenwrittenyet</a>
- </div>
- <divclass="text">
- <divclass="title">Loading</div>
- <divclass="legend">Pleasewait...</div>
- </div>
- <divclass="scrollbar">
- <imgclass="track"src="sb.gif"alt="">
- <imgclass="arrow-left"src="sl.gif"alt="">
- <imgclass="arrow-right"src="sr.gif"alt="">
- <imgclass="bar"src="sc.gif"alt="">
- </div>
- </div>
- </body>
- </html>