基本信息
源码名称：图片变大预览
源码大小：0.08M
文件格式：.rar
开发语言：js
更新时间：2015-12-16
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
图片变大预览
图片变大预览
(function(win){
function myLightBox(elem,isZoom,src){
this.elem=typeof elem=='object' ? elem : this.$$('lightBox')[0];
this.isShow=false;
this.aImages=this.elem.getElementsByTagName('img');
this.index=0;
this.src=src || '_src';
this.isZoom=typeof isZoom=='undefined' ? true : isZoom;
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('_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('div');//弹出层外框
var oMask=document.createElement('div');//遮罩
var oPrev=document.createElement('div');//上按钮
var oNext=document.createElement('div');//下按钮
var oBottom=document.createElement('div');//底部盒子
var oTitle=document.createElement('div');//底部文字盒子
var oTitleTxt=document.createElement('div');
var oClose=document.createElement('div');//关闭
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';
oClose.className='popupClose';
oTitle.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';
this.hide(oPrev);
this.hide(oNext);
this.hide(oBottom);
this.hide(oClose);
this.hide(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);
var self=this;
oImg.onload=function(){
self.show(this);
self.show(oClose);
self.show(oBottom);
self.show(oNext);
self.show(oPrev);
this.style.height='auto';
this.style.width='auto';
var w=this.width,docH=self.getFullHeight();
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)';
oMask.style.height=docH 'px';
var h=oPopup.clientHeight;
w=oPopup.clientWidth;
oPopup.style.height=oldh;
oPopup.style.width=oldw;
self.hide(oBottom);
self.hide(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);
self.show(oImg);
oImg.style.width='100%';
self.isShow=true;
});
};
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=document.documentElement.clientWidth,
vih=document.documentElement.clientHeight,
h=self.p.offsetHeight,w=self.p.offsetWidth;
self.p.style.left=(viw-w)/2 'px';
self.p.style.top=(vih-h)/2 'px';
self.mask.style.height=Math.max(self.mask.offsetHeight,vih) 'px';
self.mask.style.width=Math.max(self.mask.offsetWidth,viw) 'px';
})
};
//==============鼠标滚轮
lightBox.mouseWheels=function(){
this.addEvent(document,'mousewheel',wheel);
this.addEvent(document,'DOMMouseScroll',wheel);
var self=this;
var 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;
//FF detail 往上小于0,往下大于0;
//IE wheelDelta 往上大于0,往下小于0
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(o){
o.style.display='none';
};
//=============显示
lightBox.show=function(o){
o.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){
var h=this.hide;
h(this.prev);
h(this.next);
h(this.close);
h(this.btm);
h(this.img);
this.img.src=this.aImages[i].getAttribute(this.src);
this.txt.innerHTML=this.aImages[i].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 Math.max(sh,ch);
};
win.myLightBox=myLightBox;
})(window);
var taotao=new myLightBox('lightBox');
//第一个参数传入dom对象或class,如给页面所有图片加显示传入 document (注意别加引号);
//第二个参数boolean ,是否开启鼠标滚轮缩放 ,默认开启,可选
//第三个参数是图片真实路径,默认 '_src' 可选
//lightBox.init(o,isZoom,src);
//注意要显示的图片尺寸不能太小,否则不好看了。