JavaScript图片显示

核心提示： createBox函数CodefunctioncreateBox(){//创建覆盖层DDoverlayol=document.createElement('div');ol.id='DDoverlay';//创建图片框DDimgBoxpb=document.

createBox函数

Code

functioncreateBox(){
　　//创建覆盖层DDoverlay
　　ol=document.createElement('div');
　　ol.id='DDoverlay';
　　//创建图片框DDimgBox
　　pb=document.createElement('div');
　　pb.id='DDimgBox';
　　pb.innerHTML='<divclass="imgFrame"><imgsrc=""alt=""/></div><divclass="imgNote"></div>';
　　//在body元素内部末尾绑定覆盖层和图片框
　　document.body.appendChild(ol);
　　document.body.appendChild(pb);
}

接着获取所有的class为DDbox的<a>标签绑定onclick响应函数。

Code

　　varol=document.getElementById('DDoverlay');
　　varbox=document.getElementById('DDimgBox');
　　varim=pb.getElementsByTagName('img')[0];
　　varnote=pb.getElementsByTagName('div')[1];
　　varmg=50;
　　varelems=hasClass('DDbox','a');
　　for(vari=0;i<elems.length;i++){
　　　　elems[i].onclick=showDDbox;
　　}

其中指定标签click事件的响应函数showDDbox如下：

Code

　　functionshowDDbox(e){
　　　　which=this;　//习惯性做法，这样可以避免this在函数闭包里面的误用
　　　　//初始化box里面的一系列元素
　　　　box.style.width='auto';
　　　　box.style.height='auto';
　　　　note.innerHTML=which.rel;
　　　　im.style.height='auto';
　　　　im.style.height='auto';
　　　　im.src=which.href;
　　　　im.alt=which.rel;
　　　　setOpacity(im,0);
　　　　im.onerror=function(){
　　　　　　alert('图片载入失败！');
　　　　}
　　　　im.onload=function(){
　　　　　　ol.style.display='block';
　　　　　　box.style.visibility='hidden';
　　　　　　box.style.display='block';
　　　　　　//自适应调整图片长宽
　　　　　　varboxX=box.clientWidth+mg*2;
　　　　　　if(boxX>windowWidth()){
　　　　　　　　im.style.width=(windowWidth()-20-mg*2)+'px';
　　　　　　　　im.style.height='auto';
　　　　　　}
　　　　　　varboxY=box.clientHeight+mg*2;
　　　　　　if(boxY>windowHeight()){
　　　　　　　　im.style.height=(windowHeight()-60-mg*2)+'px';
　　　　　　　　im.style.width='auto';
　　　　　　}
　　　　　　//获取并设置居中位置
　　　　　　varpos=getCenterPos(box.clientWidth,box.clientHeight);
　　　　　　box.style.left=pos[0]+'px';
　　　　　　box.style.top=pos[1]+'px';
　　　　　　//图片框展开
　　　　　　varboxHeight=box.clientHeight-15;
　　　　　　box.style.height='0px';
　　　　　　box.style.visibility='visible';
　　　　　　slide(box,'height',0,boxHeight,1000);
　　　　　　//图片框展开后图片渐现
　　　　　　setTimeout(function(){
　　　　　　　　fade(im,0,1000,1000);
　　　　　　},1001);
　　　　};
　　　　//阻止默认事件响应函数，即页面跳转
　　　　returnfalse;
　　}

可能有些冗长呵呵，没有仔细推敲。

另外还要为覆盖层的单击事件绑定一个关闭图片框的函数，这里就简单隐藏掉图片框和覆盖层，不加什么动画效果了。

Code

　　ol.onclick=function(){
　　　　box.style.display='none';
　　　　ol.style.display='none';
　　}

第四步：整理打包