您好,欢迎访问三七文档
超酷超绚精美图片展示效果代码(一)!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title超酷超绚精美图片展示效果代码(一)-网页特效观止-网页特效代码|JsCode.CN|/titlemetahttp-equiv=imagetoolbarcontent=nostyletype=text/csshtml{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;}/stylescripttype=text/javascriptvarimf=function(){varlf=0;varinstances=[];functiongetElementsByClass(object,tag,className){varo=object.getElementsByTagName(tag);for(vari=0,n=o.length,ret=[];in;i++)if(o[i].className==className)ret.push(o[i]);if(ret.length==1)ret=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');this.bw=this.bar.width;this.alw=this.arL.width-5;this.arw=this.arR.width-5;this.bar.parent=this.oc.parent=this;this.arL.parent=this.arR.parent=this;this.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====*/this.arR.onclick=this.arR.ondblclick=function(){if(this.parent.viewthis.parent.NF-1)this.parent.calc(1);}/*====Leftarrow====*/this.arL.onclick=this.arL.ondblclick=function(){if(this.parent.view0)this.parent.calc(-1);}}/*////////////====ImageFlowprototype====////////////*/ImageFlow.prototype={/*====targets====*/calc:function(inc)
本文标题:图片特效代码
链接地址:https://www.777doc.com/doc-3816861 .html