JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JS实现显示倒影的图片横排居中放大展示特效</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:2%;
background:#003366;
}
#imageFlow.text{
position:absolute;
left:0px;
width:100%;
bottom:-12px;
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:0.5%;
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)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;
}
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.view<this.parent.NF-1)
this.parent.calc(1);
}
/*====Leftarrow====*/
this.arL.onclick=this.arL.ondblclick=function(){
if(this.parent.view>0)
this.parent.calc(-1);
}
}
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);
}
}
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.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';}
}
}
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----*/
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();
}
}
},
/*====diapoonclick====*/
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;
}
}
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();});
}
}
}();
//divID,size,zoom,border
imf.create("imageFlow",0.15,1.5,10);
</script>
</head>
<body>
<divid="imageFlow">
<divclass="top">
</div>
<divclass="bank">
<arel="images/1.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/2.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/3.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/4.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/5.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/6.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/1.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/2.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/3.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/4.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/5.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/6.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/2.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a>
<arel="images/1.jpg"title=""href="#"_fcksavedurl="#">室内三维设计效果图</a></div>
<divclass="text">
<divclass="title">
Loading</div>
<divclass="legend">
Pleasewait...</div>
</div>
<divclass="scrollbar">
<imgclass="track"src=""_fcksavedurl=""alt="">
<imgclass="arrow-left"src="images/l.jpg"_fcksavedurl="images/l.jpg"alt="">
<imgclass="arrow-right"src="images/r.jpg"_fcksavedurl="images/r.jpg"alt="">
<imgclass="bar"src="images/s.png"_fcksavedurl="images/s.png"alt=""></div>
</div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。