非常漂亮的图片展示效果，倒影，可以用用鼠标中键滚动，半透明的效果。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312">
<METAhttp-equiv=imagetoolbarcontent=no>
<STYLEtype=text/css>HTML{
OVERFLOW:hidden;HEIGHT:80%
}
BODY{
PADDING-RIGHT:0px;PADDING-LEFT:0px;BACKGROUND:#000;PADDING-BOTTOM:0px;MARGIN:0px;WIDTH:100%;PADDING-TOP:0px;HEIGHT:100%
}
#imageFlow{
BACKGROUND:#000;LEFT:0%;WIDTH:100%;POSITION:absolute;TOP:10%;HEIGHT:95%
}
#imageFlow.diapo{
LEFT:-1000px;CURSOR:pointer;POSITION:absolute;ms-interpolation-mode:nearest-neighbor
}
#imageFlow.link{
BORDER-RIGHT:#fff1pxdotted;BORDER-TOP:#fff1pxdotted;MARGIN-BOTTOM:-1px;MARGIN-LEFT:-1px;BORDER-LEFT:#fff1pxdotted;BORDER-BOTTOM:#fff1pxdotted
}
#imageFlow.bank{
VISIBILITY:hidden
}
#imageFlow.top{
BACKGROUND:#181818;WIDTH:100%;POSITION:absolute;HEIGHT:40%
}
#imageFlow.text{
Z-INDEX:1000;LEFT:0px;WIDTH:100%;COLOR:#fff;BOTTOM:16%;FONT-FAMILY:verdana,arial,Helvetica,sans-serif;POSITION:absolute;TEXT-ALIGN:center
}
#imageFlow.title{
FONT-WEIGHT:bold;FONT-SIZE:0.9em
}
#imageFlow.legend{
FONT-SIZE:0.8em
}
#imageFlow.scrollbar{
Z-INDEX:1000;LEFT:10%;WIDTH:80%;BOTTOM:10%;POSITION:absolute;HEIGHT:16px
}
#imageFlow.track{
FILTER:alpha(opacity=30);LEFT:1%;WIDTH:98%;POSITION:absolute;HEIGHT:16px;opacity:0.3
}
#imageFlow.arrow-left{
POSITION:absolute
}
#imageFlow.arrow-right{
RIGHT:0px;POSITION:absolute
}
#imageFlow.bar{
LEFT:25px;POSITION:absolute;HEIGHT:16px
}
</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)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.οnmοusedοwn=function(e){
if(!e)e=window.event;
varscl=e.screenX-this.offsetLeft;
varself=this.parent;
/*----movebar----*/
this.parent.oc.οnmοusemοve=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.οnmοuseup=function(e){
self.oc.οnmοusemοve=null;
returnfalse;
}
returnfalse;
}
/*====rightarrow====*/
this.arR.οnclick=this.arR.οndblclick=function(){
if(this.parent.view<this.parent.NF-1)
this.parent.calc(1);
}
/*====Leftarrow====*/
this.arL.οnclick=this.arL.οndblclick=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----*/
this.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(){
this.wh=this.oc.clientWidth;
this.ht=this.oc.clientHeight;
this.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;
this.img.parent=this;
this.img.className='diapo';
this.x0=this.parent.oc.clientWidth;
this.x1=this.x0;
this.w0=0;
this.w1=0;
this.z1=1;
this.img.parent=this;
this.img.οnclick=function(){this.parent.click();}
this.parent.oc.appendChild(this.img);
/*----displayexternallink----*/
if(url){
this.img.οnmοuseοver=function(){this.className='diapolink';}
this.img.οnmοuseοut=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{
/*====imageοnlοad====*/
if(this.img.complete&&this.img.width){
/*----getsizeimage----*/
this.iw=this.img.width;
this.ih=this.img.height;
this.r=this.ih/this.iw;
this.loaded=true;
/*----createreflexion----*/
this.flx=createReflexion(this.parent.oc,this.img);
if(this.parent.view<0)this.parent.view=this.N;
this.parent.calc();
}
}
},
/*====diapoοnclick====*/
click:function(){
if(this.parent.view==this.N){
/*----clickonzoomeddiapo----*/
if(this.url){
/*----openhyperlink----*/
window.open(this.url,this.target);
}else{
/*----zoomin/out----*/
this.z1=this.z1==1?this.parent.zoom:1;
this.parent.calc();
}
}else{
/*----selectdiapo----*/
this.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.οnmοusemοve=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>
<METAcontent="MSHTML6.00.2900.3395"name=GENERATOR></HEAD>
<BODY>
<DIVid=imageFlow>
<DIVclass=top></DIV>
<DIVclass=bank>
这里开始可以自己替换为自己需要的图片路径，当然可以用一个简单的DOWHILE循环改为动态的程序，没有个数的多少限制的
<Arel=images/productshow1.jpg>无限节点-让网站茁壮成长</A><A
rel=images/productshow2.jpg>CORANGE.CN</A><A
rel=images/productshow3.jpg>实业研发-打造世界级产品</A><A
rel=images/productshow4.jpg>专业解决方案输出-确保客户的每一分投</A><A
rel=images/productshow5.jpg>金三角增值计划-三强联手为客户打造最有价值的开发服务体系</A><A
rel=images/productshow6.jpg>开发者俱乐部计划-让每一个参与都都畅享科技成果！</A><A
rel=images/productshow7.jpg>可拆卸式自由模板设计-随时随地给网站穿新衣！</A><A
rel=images/productshow8.jpg>CSDN外包全球首邀TOP伙伴-专业品质缔造辉煌！</A><A
rel=images/productshow9.jpg>开放模型-自由订制您所需要的功能！</A><A
rel=images/productshow10.jpg>应用方便-掌握WORD软件三成技术者即能快速上手！</A></DIV>
<DIVclass=text>
<DIVclass=title>Loading</DIV>
<DIVclass=legend>Pleasewait...</DIV></DIV>
<DIVclass=scrollbar><IMGclass=trackalt=""
src="images/sb.gif"><IMGclass=arrow-leftalt=""
src="images/sl.gif"><IMGclass=arrow-rightalt=""
src="images/sr.gif"><IMGclass=baralt=""
src="images/sc.gif"></DIV></DIV></BODY></HTML>
转载请带上永久链接地址http://www.corange.cn/archives/2008/08/1564.html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
