.lightBox{margin-left:50px;width:750px;position: relative;height: 580px;padding: 10px 0;}
.lightBox ul{width: 650px}
.lightBox li{height: 100px;width: 150px;margin:15px 15px;float: left;overflow: hidden;display: inline;}
.lightBox li img{height: 100px;width: 150px; cursor:pointer;}
.lightBox b{float:left;position: relative;top:117px;right:96px;}
/**弹出层样式***/
.mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: fixed;;z-index: 1;left: 0;top:0;}
.popup{background:#fff url(./images/loading.gif) no-repeat center;border: 10px solid #fff;position: absolute;top:50%;left:50%;z-index: 2;;overflow:hidden;width: 320px;height: 240px}
.popup img{height: auto;width: auto;}
.btn{position: absolute;right: 0;top:0;height: 100%;width: 50%;cursor: pointer;}
.prev{left: 0;background: url(./images/lightbox-btn-prev.gif) no-repeat 0 50px;}
.next{background: url(./images/lightbox-btn-next.gif) no-repeat right 50px;}
.popupBottom{position: relative;z-index: 3;margin-top:8px}
.popupTitle,.popupClose{float: right;}
.popupTitle{width:100%;line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;margin-right: -81px;width: 100%;_margin:-22px 0 0 0}
.popupTitleTxt{float: left;margin-right: 126px}
.popupClose{margin-right:15px;height: 22px;width: 66px;background: url(./images/lightbox-btn-close.gif) no-repeat;cursor: pointer;position: relative;z-index: 4}
我就不明白。如果不按页面向下滚动，在900高度可以正常显示，超过900以上的高度，放大的图片怎么不能跟随了？
`
<script>
/*
* author:涛涛
* date:2013/8/22
* homePage:http://www.webrhai.com
*/
(function(win){
var lightBox={};
lightBox.init=function(elem){
this.elem=this.$$('lightBox')[0];
this.aImages=this.elem.getElementsByTagName('img');
this.index=this.maxH=0;
this.len=this.aImages.length;
this.showPopup();
};
//============显示弹出层
lightBox.showPopup=function(){
var self=this,
img=this.aImages;
for(var i=0;i<this.len;i++){
img[i].index=i;
img[i].onclick=function(){
self.maxH=0;
self.index=this.index;
self.createPopup(this.src,this.getAttribute('_title'));
}
}
};
//===========class获取元素
//params s 类名
//params t 节点名
//params p 父辈以上节点 dom对象
lightBox.$$=function(s,t,p){
var aElement=(p||document).getElementsByTagName(t||'*'),
reg=new RegExp('(^|\\s)'+s+'(\\s|$)'),
aResult=[];
for(var i=0;i<aElement.length;i++){
reg.test(aElement[i].className) && aResult.push(aElement[i]);
};
return aResult;
};
//==============创建弹出层展示
//params src 图片路径
//params title 显示文字
lightBox.createPopup=function(src,title){
var oPopup=document.createElement('p');//弹出层外框
var oMask=document.createElement('p');//遮罩
var oPrev=document.createElement('p');//上按钮
var oNext=document.createElement('p');//下按钮
var oBottom=document.createElement('p');//底部盒子
var oTitle=document.createElement('p');//底部文字盒子
var oTitleTxt=document.createElement('p');
var oClose=document.createElement('p');//关闭
var oImg=document.createElement('img');//图片
oMask.className='mask';
oPopup.className='popup';
oPrev.className='prev btn';
oNext.className='next btn';
oBottom.className='popupBottom';
oTitle.className='popupTitle';
oTitleTxt.className='popupTitleTxt';
oClose.className='popupClose';
oTitleTxt.innerHTML=title || '';
var vw=document.documentElement.clientWidth,
vh=document.documentElement.clientHeight;
oPopup.style.margin='0';
oPopup.style.left=(vw-320)/2+'px';
oPopup.style.top=(vh-240)/2+'px';
oTitle.appendChild(oTitleTxt);
oBottom.appendChild(oClose);
oBottom.appendChild(oTitle);
oPopup.appendChild(oPrev);
oPopup.appendChild(oNext);
oPopup.appendChild(oImg);
oPopup.appendChild(oBottom);
document.body.appendChild(oMask);
document.body.appendChild(oPopup);
var self=this;
oImg.onload=function(){
var w=this.width,docH=self.getFullHeight();
var oldw=self.css(oPopup,'width'),oldh=self.css(oPopup,'height');
oBottom.style.width=w+'px';
oPopup.style.height='auto';
oPopup.style.width='auto';
oPopup.style.opacity=0;
oPopup.style.filter='alpha(opacity:0)';
oMask.style.height=docH+'px';
var h=oPopup.clientHeight;
w=oPopup.clientWidth;
oPopup.style.height=oldh;
oPopup.style.width=oldw;
oBottom.style.display=oImg.style.display='none';
self.move(oMask,{opacity:60},5);
self.move(oPopup,{opacity:100,height:h,width:w,left:parseInt((vw-w)/2),top:parseInt((vh-h)/2)},5,function(){
oBottom.style.display=oImg.style.display='block';
});
};
oImg.src=src;
this.prev=oPrev;
this.next=oNext;
this.close=oClose;
this.img=oImg;
this.txt=oTitleTxt;
this.p=oPopup;
this.mask=oMask;
this.nexts();
this.prevs();
this.stopPropagation();
this.closes();
this.mouseWheels();
};
//==============鼠标滚轮
lightBox.mouseWheels=function(){
this.addEvent(document,'mousewheel',wheel);
this.addEvent(document,'DOMMouseScroll',wheel);
var self=this;
function wheel(e){
self.maxH=Math.max(self.p.clientHeight,self.maxH);
var ev=window.event||e,flag=true,
h=self.p.clientHeight,w=self.p.clientWidth,
l=self.p.offsetLeft,t=self.p.offsetTop;
//FF detail 往上小于0,往下大于0;
//IE wheelDelta 往上大于0,往下小于0
flag=ev.wheelDelta ? ev.wheelDelta<0 : ev.detail>0;
switch(flag)
{
//往下
case true:
if(h<150 || w<200)return;
h-=20;
w-=20;
l+=10;
t+=10;
break;
default : //往上
if(h<self.maxH){
h+=20;
w+=20;
l-=10;
t-=10;
}
};
self.css(self.p,'height',h);
self.css(self.p,'left',l);
self.css(self.p,'width',w);
self.css(self.p,'top',t);
ev.preventDefault && ev.preventDefault();
return false;
}
};
//==============阻止冒泡
lightBox.stopPropagation=function(){
this.elem.onclick=this.p.onclick=function(ev){
var e=window.event||ev;
e.stoppropagation ? e.stopPropagation() :(e.cancelBubble=true);
}
};
//==============绑定事件
//params o dom对象
//params type 事件类型
//params fn 事件函数
lightBox.addEvent=function(o,type,fn){
return o.addEventListener ? o.addEventListener(type,fn,false) : o.attachEvent('on'+type,fn);
};
//==============解除事件绑定
lightBox.removeEvent=function(o,type,fn){
return o.detachEvent ? o.detachEvent('on'+type,fn) : o.removeEventListener(type,fn);
};
//==============关闭
lightBox.closes=function(){
var self=this;
document.onclick=this.close.onclick=function(){
self.move(self.mask,{opacity:0},5,function(){
document.body.removeChild(self.mask);
});
document.body.removeChild(self.p);
};
};
//==============点击上一张
lightBox.prevs=function(){
var self=this;
this.prev.onclick=function(){
var index=--self.index;
self.maxH=0;
if(index<0){
index=self.index=self.len-1;
}
self.img.src=self.aImages[index].src;
self.txt.innerHTML=self.aImages[index].getAttribute('_title');
}
};
//==============点击下一张
lightBox.nexts=function(){
var self=this;
this.next.onclick=function(){
var index=++self.index;
self.maxH=0;
if(index>=self.len){
index=self.index=0;
}
self.img.src=self.aImages[index].src;
self.txt.innerHTML=self.aImages[index].getAttribute('_title');
}
};
//=============缓冲运动
//params o dom对象
//params json 散列表
//params fx Boolean值
//params fn 回调函数,可选
lightBox.move=function(o,json,fx,fn){
var self=this;
o.timer && clearInterval(o.timer);
o.timer=setInterval(function(){
var bStop=true;
var cur=0;
for(var attr in json){
cur=attr=='opacity' ? parseInt(parseFloat(self.css(o,attr)).toFixed(2)*100):parseInt(self.css(o,attr));
var speed=(json[attr]-cur)/fx;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(attr=='opacity'){
o.style.filter='alpha(opacity:'+(speed+cur)+')';
o.style.opacity=(speed+cur)/100;
}else{
o.style[attr]=(cur+speed)+'px';
}
if(cur!=json[attr]){
bStop=false;
}
if(bStop){
clearInterval(o.timer);
(typeof fn=='function')&&fn();
}
}
},30)
};
//=============获取元素样式
//params o dom对象
//params attr 属性
lightBox.css=function(o,attr,val){
if(arguments.length==2){
return o.currentStyle ? o.currentStyle[attr] : getComputedStyle(o,false)[attr];
}
else
{
o.style[attr]=val+'px';
}
};
//=============获取页面高度
lightBox.getFullHeight=function(){
var sh=document.body.scrollHeight,
ch=document.documentElement.clientHeight;
return sh>ch? sh : ch;
};
win.lightBox=lightBox;
})(window);
lightBox.init();
</script>
`
