js图片点击放大遮罩翻页 仿jquery -lightBox
<!DOCTYPE html>
<html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>js仿jquery-lightBox</title>
<style>
body,ul,li,p,img{margin: 0;padding: 0}
html,body{background: #fff;}
.lightBox{margin:30px auto;width:750px;height: 80px;padding: 10px 0;border: 1px solid #ccc}
.lightBox ul{width: 750px}
.lightBox li{height: 80px;width: 140px;margin:0 5px;float: left;overflow: hidden;display: inline;}
.lightBox li img{height: 80px;width: 140px}
/**弹出层样式***/
.mask{height: 100%;width: 100%;filter:alpha(opacity:0);opacity: 0;background: #000;position: absolute;z-index: 1;left: 0;top:0;display: -none;}
.popup{background:#fff url() no-repeat center;border: 10px solid #fff;position: absolute;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() no-repeat 0 50px;}
.next{background: url() no-repeat right 50px;}
.popupBottom{position: relative;z-index: 3;margin-top:4px}
.popupTitle{line-height: 18px;color: #543424;font-family: Arial;font-size: 12px;padding-right: 100px;}
.popupClose{margin-right:15px;height: 22px;width: 66px;background: url() no-repeat;cursor: pointer;z-index: 4;position: absolute;top:0;right: 0;}
</style>
</head>
<body>
<div class="lightBox"> <ul> <li><img src="缩略图地址" _title="仿jquery-lightBox" _src="原图地址"></li> <li><img src="缩略图地址" _title="仿jquery-lightBox" _src="原图地址"></li> <li><img src="缩略图地址" _title="仿jquery-lightBox" _src="原图地址"></li> <li><img src="缩略图地址" _title="仿jquery-lightBox" _src="原图地址"></li> <li><img src="缩略图地址" _title="仿jquery-lightBox" _src="原图地址"></li> </ul> </div>
<script>
(function(win){
function myLightBox(elem,isZoom,src,titletxt){
this.elem=typeof elem=='object' ? elem : this.$('lightBox')[0];
this.isZoom=typeof isZoom=='undefined' ? true : isZoom;
"http://blog.51cto.com/viewpic.php?refimg=" + this.src=src || '_src';
this.titletxt=titletxt || '_title';
this.isShow=false;
this.index=0;
this.aImages=this.elem.getElementsByTagName('img');
this.len=this.aImages.length;
this.showPopup();
};
var lightBox=myLightBox.prototype;
//显示弹出层
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.index=this.index;
self.createPopup(this.getAttribute(self.src),this.getAttribute(self.titletxt));
}
}
};
//class获取元素
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 self=this,
oPopup=document.createElement('div'),//弹出层外框
oMask=document.createElement('div'),//遮罩
oPrev=document.createElement('div'),//上按钮
oNext=document.createElement('div'),//下按钮
oBottom=document.createElement('div'),//底部盒子
oTitle=document.createElement('div'),//底部文字盒子
oClose=document.createElement('div'),//关闭
oImg=document.createElement('img'),//图片
vw=document.documentElement.clientWidth,
vh=document.documentElement.clientHeight;
oMask.className='mask';
oPopup.className='popup';
oPrev.className='prev btn';
oNext.className='next btn';
oBottom.className='popupBottom';
oTitle.className='popupTitle';
oClose.className='popupClose';
oTitle.innerHTML=title || '';
oPopup.style.margin='0';
oPopup.style.left=(vw-320)/2+'px';
oPopup.style.top=(vh-240)/2+'px';
oMask.style.height=this.getFullHeight()+'px';
this.hide(oPrev,oNext,oBottom,oClose,oImg);
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);
oImg.onload=function(){
self.show(this,oClose,oBottom);
this.style.height='auto';
this.style.width='auto';
var oldw=self.css(oPopup,'width'),oldh=self.css(oPopup,'height');
oPopup.style.height='auto';
oPopup.style.width='auto';
oPopup.style.opacity=0;
oPopup.style.filter='alpha(opacity:0)';
var h=oPopup.clientHeight,w=oPopup.clientWidth;
oPopup.style.height=oldh;
oPopup.style.width=oldw;
self.hide(oBottom,oImg);
self.move(oPopup,{opacity:100,height:h,width:w,left:parseInt((vw-w)/2),top:parseInt((vh-h)/2)},5,function(){
self.show(oBottom,oImg);
oImg.style.width='100%';
self.isShow=true;
oPopup.onmouseover = function(){
self.show(oNext,oPrev);
};
oPopup.onmouseout = function(){
self.hide(oNext,oPrev);
};
});
};
self.move(oMask,{opacity:60},5);
oImg.src=src;
this.prev=oPrev;
this.next=oNext;
this.close=oClose;
this.img=oImg;
this.txt=oTitle;
this.btm=oBottom;
this.p=oPopup;
this.mask=oMask;
this.nexts();
this.prevs();
this.stopPropagation();
this.closes();
this.isZoom && this.mouseWheels();
this.resizefn();
};
//============重置窗口大小
lightBox.resizefn=function(){
if(!this.p)return;
var self=this;
this.addEvent(window,'resize',function(){
if(!self.p)return;
var viw=self.getWinSize()[0],
vih=self.getWinSize()[1],
p=self.p,ms=self.mask,
h=p.offsetHeight,w=p.offsetWidth;
self.css(p,'left',(viw-w)/2);
self.css(p,'top',(vih-h)/2);
self.css(ms,'height',Math.max(h,vih));
self.css(ms,'width',Math.max(w,viw));
})
};
//===============获取窗口大小
lightBox.getWinSize=function(){
var d=document.documentElement;
return [d.clientWidth,d.clientHeight];
};
//==============鼠标滚轮
lightBox.mouseWheels=function(){
this.addEvent(document,'mousewheel',wheel);
this.addEvent(document,'DOMMouseScroll',wheel);
var self=this,isBeyond=false;
function wheel(e){
var ev=window.event||e,flag=true,
h=self.img.height,w=self.img.width,
l=self.p.offsetLeft,t=self.p.offsetTop,
scale=h/w,
nw=Math.round(20/scale),
txtH=Math.max(self.btm.offsetHeight,22)+8,
viw=document.documentElement.clientWidth-80,
vih=document.documentElement.clientHeight-50,
maxH=self.p.offsetHeight,
maxW=self.p.offsetWidth;
flag=ev.wheelDelta ? ev.wheelDelta<0 : ev.detail>0;
if(maxW>=viw || maxH>=vih){
isBeyond=true;
};
switch(flag)
{
case true://往下
if(h<150 || w<200)return;
h-=20;
w-=nw;
l+=nw/2;
t+=10;
isBeyond=false;
break;
default : //往上
h+=20;
w+=nw;
l-=nw/2;
t-=10;
};
if(!isBeyond){
self.css(self.p,'height',h+txtH);
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.p.onclick=function(ev){
var e=window.event||ev;
e.stoppropagation ? e.stopPropagation() :(e.cancelBubble=true);
}
};
//=============隐藏
lightBox.hide=function(){
for(var i=0;i<arguments.length;i++){
arguments[i].style.display='none';
}
};
//=============显示
lightBox.show=function(){
for(var i=0;i<arguments.length;i++){
arguments[i].style.display='block';
}
};
//==============绑定事件
//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(){
if(!self.isShow)return;
self.move(self.mask,{opacity:0},5,function(){
document.body.removeChild(self.mask);
});
document.body.removeChild(self.p);
self.isShow=false;
delete self.p,self.prev,self.next,self.close,self.img,self.txt,self.btm,self.mask;
self.img.onload=null;
};
};
//==============点击上一张
lightBox.prevs=function(){
var self=this;
this.prev.onclick=function(){
var index=--self.index;
if(index<0){
index=self.index=self.len-1;
};
self.clickSwitch(index);
}
};
//==============点击下一张
lightBox.nexts=function(){
var self=this;
this.next.onclick=function(){
var index=++self.index;
if(index>=self.len){
index=self.index=0;
};
self.clickSwitch(index);
}
};
//================点击切换公有代码
lightBox.clickSwitch=function(i){
this.hide(this.prev,this.next,this.close,this.btm,this.img);
this.img.src=this.aImages[i].getAttribute("http://blog.51cto.com/viewpic.php?refimg=" + this.src);
this.txt.innerHTML=this.aImages[i].getAttribute(this.titletxt);
}
//=============缓冲运动
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)
};
//=============获取元素样式
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-4,
ch=document.documentElement.clientHeight;
return Math.max(sh,ch);
};
win.myLightBox=myLightBox;
})(window);
var light_act=new myLightBox('lightBox');
//注意图片尺寸不能太小
light_act=null;
</script>
</body>
</html>