以下是 layer jQuery弹出层插件特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
部分效果截图3:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为layer jQuery弹出层插件,属于站长常用代码" />
<title>layer jQuery弹出层插件</title>
<style>
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
a,a:hover{ text-decoration:none;}
pre{font-family:'微软雅黑'}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
.photos-demo img{width:200px;}
</style>
<script src="layer/jquery-1.8.3.min.js"></script>
<script src="layer/layer.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="box">
<h2 style="padding-bottom:20px;">扩展模块:图片查看器(相册层)</h2>
<div id="photosDemo" class="photos-demo">
<!-- layer-src表示大图 layer-pid表示图片id src表示缩略图-->
<img layer-src="img/1.jpg" layer-pid="" src="img/1.jpg" alt="第一张">
<img layer-src="img/2.jpg" layer-pid="" src="img/2.jpg" alt="第二张">
<img layer-src="img/3.jpg" layer-pid="" src="img/3.jpg" alt="第三张">
<img layer-src="img/4.jpg" layer-pid="" src="img/4.jpg" alt="第四张">
<img layer-src="img/5.jpg" layer-pid="" src="img/5.jpg" alt="第五张">
</div>
</div>
<script>
;!function(){
//页面一打开就执行,放入ready是为了layer所需配件(css、扩展模块)加载完毕
layer.ready(function(){
//官网欢迎页
layer.open({
type: 2,
//skin: 'layui-layer-lan',
title: 'layer弹层组件',
fix: false,
shadeClose: true,
maxmin: true,
area: ['1000px', '500px'],
content: 'http://www.baidu.com/',
end: function(){
layer.tips('试试相册模块?', '#photosDemo', {tips: 1})
}
});
//layer.msg('欢迎使用layer');
//使用相册
layer.photos({
photos: '#photosDemo'
});
});
//关于
$('#about').on('click', function(){
layer.alert(layer.v + ' - 贤心出品 sentsin.com');
});
}();
</script>
<!-- 代码 结束 -->
</body>
</html>
JS代码(layer.js):
/*! layer-v2.3 弹层组件 License LGPL http://layer.layui.com/ By 贤心 */
;
!function(a,b){
"use strict";
var c,d,e={
getPath:function(){
var a=document.scripts,b=a[a.length-1],c=b.src;
if(!b.getAttribute("merge"))return c.substring(0,c.lastIndexOf("/")+1)}
(),enter:function(a){
13===a.keyCode&&a.preventDefault()}
,config:{
}
,end:{
}
,btn:["确
定
","取
消
"],type:["dialog","page","iframe","loading","tips"]}
,f={
v:"2.3",ie6:!!a.ActiveXObject&&!a.XMLHttpRequest,index:0,path:e.getPath,config:function(a,b){
var d=0;
return a=a||{
}
,f.cache=e.config=c.extend(e.config,a),f.path=e.config.path||f.path,"string"==typeof a.extend&&(a.extend=[a.extend]),f.use("skin/layer.css",a.extend&&a.extend.length>0?function g(){
var c=a.extend;
f.use(c[c[d]?d:d-1],d<c.length?function(){
return++d,g}
():b)}
():b),this}
,use:function(a,b,d){
var e=c("head")[0],a=a.replace(/\s/g,""),g=/\.css$/.test(a),h=document.createElement(g?"link":"script"),i="layui_layer_"+a.replace(/\.|\//g,"");
return f.path?(g&&(h.rel="stylesheet"),h[g?"href":"src"]=/^http:\/\//.test(a)?a:f.path+a,h.id=i,c("#"+i)[0]||e.appendChild(h),function j(){
(g?1989===parseInt(c("#"+i).css("width")):f[d||i])?function(){
b&&b();
try{
g||e.removeChild(h)}
catch(a){
}
}
():setTimeout(j,100)}
(),this):void 0}
,ready:function(a,b){
var d="function"==typeof a;
return d&&(b=a),f.config(c.extend(e.config,function(){
return d?{
}
:{
path:a}
}
()),b),this}
,alert:function(a,b,d){
var e="function"==typeof b;
return e&&(d=b),f.open(c.extend({
content:a,yes:d}
,e?{
}
:b))}
,confirm:function(a,b,d,g){
var h="function"==typeof b;
return h&&(g=d,d=b),f.open(c.extend({
content:a,btn:e.btn,yes:d,btn2:g}
,h?{
}
:b))}
,msg:function(a,d,g){
var i="function"==typeof d,j=e.config.skin,k=(j?j+" "+j+"-msg":"")||"layui-layer-msg",l=h.anim.length-1;
return i&&(g=d),f.open(c.extend({
content:a,time:3e3,shade:!1,skin:k,title:!1,closeBtn:!1,btn:!1,end:g}
,i&&!e.config.skin?{
skin:k+" layui-layer-hui",shift:l}
:function(){
return d=d||{
}
,(-1===d.icon||d.icon===b&&!e.config.skin)&&(d.skin=k+" "+(d.skin||"layui-layer-hui")),d}
()))}
,load:function(a,b){
return f.open(c.extend({
type:3,icon:a||0,shade:.01}
,b))}
,tips:function(a,b,d){
return f.open(c.extend({
type:4,content:[a,b],closeBtn:!1,time:3e3,shade:!1,maxWidth:210}
,d))}
}
,g=function(a){
var b=this;
b.index=++f.index,b.config=c.extend({
}
,b.config,e.config,a),b.creat()}
;
g.pt=g.prototype;
var h=["layui-layer",".layui-layer-title",".layui-layer-main",".layui-layer-dialog","layui-layer-iframe","layui-layer-content","layui-layer-btn","layui-layer-close"];
h.anim=["layer-anim","layer-anim-01","layer-anim-02","layer-anim-03","layer-anim-04","layer-anim-05","layer-anim-06"],g.pt.config={
type:0,shade:.3,fix:!0,move:h[1],title:"信
息
",offset:"auto",area:"auto",closeBtn:1,time:0,zIndex:19891014,maxWidth:360,shift:0,icon:-1,scrollbar:!0,tips:2}
,g.pt.vessel=function(a,b){
var c=this,d=c.index,f=c.config,g=f.zIndex+d,i="object"==typeof f.title,j=f.maxmin&&(1===f.type||2===f.type),k=f.title?'<div class="layui-layer-title" style="'+(i?f.title[1]:"")+'">'+(i?f.title[0]:f.title)+"</div>":"";
return f.zIndex=g,b([f.shade?'<div class="layui-layer-shade" id="layui-layer-shade'+d+'" times="'+d+'" style="'+("z-index:"+(g-1)+";
background-color:"+(f.shade[1]||"#000")+";
opacity:"+(f.shade[0]||f.shade)+";
filter:alpha(opacity="+(100*f.shade[0]||100*f.shade)+");
")+'"></div>':"",'<div class="'+h[0]+" "+(h.anim[f.shift]||"")+(" layui-layer-"+e.type[f.type])+(0!=f.type&&2!=f.type||f.shade?"":" layui-layer-border")+" "+(f.skin||"")+'" id="'+h[0]+d+'" type="'+e.type[f.type]+'" times="'+d+'" showtime="'+f.time+'" conType="'+(a?"object":"string")+'" style="z-index:'+g+";
width:"+f.area[0]+";
height:"+f.area[1]+(f.fix?"":";
position:absolute;
")+'">'+(a&&2!=f.type?"":k)+'<div id="'+(f.id||"")+'" class="layui-layer-content'+(0==f.type&&-1!==f.icon?" layui-layer-padding":"")+(3==f.type?" layui-layer-loading"+f.icon:"")+'">'+(0==f.type&&-1!==f.icon?'<i class="layui-layer-ico layui-layer-ico'+f.icon+'"></i>':"")+(1==f.type&&a?"":f.content||"")+'</div><span class="layui-layer-setwin">'+function(){
var a=j?'<a class="layui-layer-min" href="javascript:;
"><cite></cite></a><a class="layui-layer-ico layui-layer-max" href="javascript:;
"></a>':"";
return f.closeBtn&&(a+='<a class="layui-layer-ico '+h[7]+" "+h[7]+(f.title?f.closeBtn:4==f.type?"1":"2")+'" href="javascript:;
"></a>'),a}
()+"</span>"+(f.btn?function(){
var a="";
"string"==typeof f.btn&&(f.btn=[f.btn]);
for(var b=0,c=f.btn.length;
c>b;
b++)a+='<a class="'+h[6]+b+'">'+f.btn[b]+"</a>";
return'<div class="'+h[6]+'">'+a+"</div>"}
():"")+"</div>"],k),c}
,g.pt.creat=function(){
var a=this,b=a.config,g=a.index,i=b.content,j="object"==typeof i;
if(!c("#"+b.id)[0]){
switch("string"==typeof b.area&&(b.area="auto"===b.area?["",""]:[b.area,""]),b.type){
case 0:b.btn="btn"in b?b.btn:e.btn[0],f.closeAll("dialog");
break;
case 2:var i=b.content=j?b.content:[b.content||"http://layer.layui.com","auto"];
b.content='<iframe scrolling="'+(b.content[1]||"auto")+'" allowtransparency="true" id="'+h[4]+g+'" name="'+h[4]+g+'" onload="this.className=\'\';
" class="layui-layer-load" frameborder="0" src="'+b.content[0]+'"></iframe>';
break;
case 3:b.title=!1,b.closeBtn=!1,-1===b.icon&&0===b.icon,f.closeAll("loading");
break;
case 4:j||(b.content=[b.content,"body"]),b.follow=b.content[1],b.content=b.content[0]+'<i class="layui-layer-TipsG"></i>',b.title=!1,b.fix=!1,b.tips="object"==typeof b.tips?b.tips:[b.tips,!0],b.tipsMore||f.closeAll("tips")}
a.vessel(j,function(d,e){
c("body").append(d[0]),j?function(){
2==b.type||4==b.type?function(){
c("body").append(d[1])}
():function(){
i.parents("."+h[0])[0]||(i.show().addClass("layui-layer-wrap").wrap(d[1]),c("#"+h[0]+g).find("."+h[5]).before(e))}
()}
():c("body").append(d[1]),a.layero=c("#"+h[0]+g),b.scrollbar||h.html.css("overflow","hidden").attr("layer-full",g)}
).auto(g),2==b.type&&f.ie6&&a.layero.find("iframe").attr("src",i[0]),c(document).off("keydown",e.enter).on("keydown",e.enter),a.layero.on("keydown",function(a){
c(document).off("keydown",e.enter)}
),4==b.type?a.tips():a.offset(),b.fix&&d.on("resize",function(){
a.offset(),(/^\d+%$/.test(b.area[0])||/^\d+%$/.test(b.area[1]))&&a.auto(g),4==b.type&&a.tips()}
),b.time<=0||setTimeout(function(){
f.close(a.index)}
,b.time),a.move().callback()}
}
,g.pt.auto=function(a){
function b(a){
a=g.find(a),a.height(i[1]-j-k-2*(0|parseFloat(a.css("padding"))))}
var e=this,f=e.config,g=c("#"+h[0]+a);
""===f.area[0]&&f.maxWidth>0&&(/MSIE 7/.test(navigator.userAgent)&&f.btn&&g.width(g.innerWidth()),g.outerWidth()>f.maxWidth&&g.width(f.maxWidth));
var i=[g.innerWidth(),g.innerHeight()],j=g.find(h[1]).outerHeight()||0,k=g.find("."+h[6]).outerHeight()||0;
switch(f.type){
case 2:b("iframe");
break;
default:""===f.area[1]?f.fix&&i[1]>=d.height()&&(i[1]=d.height(),b("."+h[5])):b("."+h[5])}
return e}
,g.pt.offset=function(){
var a=this,b=a.config,c=a.layero,e=[c.outerWidth(),c.outerHeight()],f="object"==typeof b.offset;
a.offsetTop=(d.height()-e[1])/2,a.offsetLeft=(d.width()-e[0])/2,f?(a.offsetTop=b.offset[0],a.offsetLeft=b.offset[1]||a.offsetLeft):"auto"!==b.offset&&(a.offsetTop=b.offset,"rb"===b.offset&&(a.offsetTop=d.height()-e[1],a.offsetLeft=d.width()-e[0])),b.fix||(a.offsetTop=/%$/.test(a.offsetTop)?d.height()*parseFloat(a.offsetTop)/100:parseFloat(a.offsetTop),a.offsetLeft=/%$/.test(a.offsetLeft)?d.width()*parseFloat(a.offsetLeft)/100:parseFloat(a.offsetLeft),a.offsetTop+=d.scrollTop(),a.offsetLeft+=d.scrollLeft()),c.css({
top:a.offsetTop,left:a.offsetLeft}
)}
,g.pt.tips=function(){
var a=this,b=a.config,e=a.layero,f=[e.outerWidth(),e.outerHeight()],g=c(b.follow);
g[0]||(g=c("body"));
var i={
width:g.outerWidth(),height:g.outerHeight(),top:g.offset().top,left:g.offset().left}
,j=e.find(".layui-layer-TipsG"),k=b.tips[0];
b.tips[1]||j.remove(),i.autoLeft=function(){
i.left+f[0]-d.width()>0?(i.tipLeft=i.left+i.width-f[0],j.css({
right:12,left:"auto"}
)):i.tipLeft=i.left}
,i.where=[function(){
i.autoLeft(),i.tipTop=i.top-f[1]-10,j.removeClass("layui-layer-TipsB").addClass("layui-layer-TipsT").css("border-right-color",b.tips[1])}
,function(){
i.tipLeft=i.left+i.width+10,i.tipTop=i.top,j.removeClass("layui-layer-TipsL").addClass("layui-layer-TipsR").css("border-bottom-color",b.tips[1])}
,function(){
i.autoLeft(),i.tipTop=i.top+i.height+10,j.removeClass("layui-layer-TipsT").addClass("layui-layer-TipsB").css("border-right-color",b.tips[1])}
,function(){
i.tipLeft=i.left-f[0]-10,i.tipTop=i.top,j.removeClass("layui-layer-TipsR").addClass("layui-layer-TipsL").css("border-bottom-color",b.tips[1])}
],i.where[k-1](),1===k?i.top-(d.scrollTop()+f[1]+16)<0&&i.where[2]():2===k?d.width()-(i.left+i.width+f[0]+16)>0||i.where[3]():3===k?i.top-d.scrollTop()+i.height+f[1]+16-d.height()>0&&i.where[0]():4===k&&f[0]+16-i.left>0&&i.where[1](),e.find("."+h[5]).css({
"background-color":b.tips[1],"padding-right":b.closeBtn?"30px":""}
),e.css({
left:i.tipLeft,top:i.tipTop}
)}
,g.pt.move=function(){
var a=this,b=a.config,e={
setY:0,moveLayer:function(){
var a=e.layero,b=parseInt(a.css("margin-left")),c=parseInt(e.move.css("left"));
0===b||(c-=b),"fixed"!==a.css("position")&&(c-=a.parent().offset().left,e.setY=0),a.css({
left:c,top:parseInt(e.move.css("top"))-e.setY}
)}
}
,f=a.layero.find(b.move);
return b.move&&f.attr("move","ok"),f.css({
cursor:b.move?"move":"auto"}
),c(b.move).on("mousedown",function(a){
if(a.preventDefault(),"ok"===c(this).attr("move")){
e.ismove=!0,e.layero=c(this).parents("."+h[0]);
var f=e.layero.offset().left,g=e.layero.offset().top,i=e.layero.outerWidth()-6,j=e.layero.outerHeight()-6;
c("#layui-layer-moves")[0]||c("body").append('<div id="layui-layer-moves" class="layui-layer-moves" style="left:'+f+"px;
top:"+g+"px;
width:"+i+"px;
height:"+j+'px;
z-index:2147483584"></div>'),e.move=c("#layui-layer-moves"),b.moveType&&e.move.css({
visibility:"hidden"}
),e.moveX=a.pageX-e.move.position().left,e.moveY=a.pageY-e.move.position().top,"fixed"!==e.layero.css("position")||(e.setY=d.scrollTop())}
}
),c(document).mousemove(function(a){
if(e.ismove){
var c=a.pageX-e.moveX,f=a.pageY-e.moveY;
if(a.preventDefault(),!b.moveOut){
e.setY=d.scrollTop();
var g=d.width()-e.move.outerWidth(),h=e.setY;
0>c&&(c=0),c>g&&(c=g),h>f&&(f=h),f>d.height()-e.move.outerHeight()+e.setY&&(f=d.height()-e.move.outerHeight()+e.setY)}
e.move.css({
left:c,top:f}
),b.moveType&&e.moveLayer(),c=f=g=h=null}
}
).mouseup(function(){
try{
e.ismove&&(e.moveLayer(),e.move.remove(),b.moveEnd&&b.moveEnd()),e.ismove=!1}
catch(a){
e.ismove=!1}
}
),a}
,g.pt.callback=function(){
function a(){
var a=g.cancel&&g.cancel(b.index,d);
a===!1||f.close(b.index)}
var b=this,d=b.layero,g=b.config;
b.openLayer(),g.success&&(2==g.type?d.find("iframe").on("load",function(){
g.success(d,b.index)}
):g.success(d,b.index)),f.ie6&&b.IE6(d),d.find("."+h[6]).children("a").on("click",function(){
var a=c(this).index();
if(0===a)g.yes?g.yes(b.index,d):g.btn1?g.btn1(b.index,d):f.close(b.index);
else{
var e=g["btn"+(a+1)]&&g["btn"+(a+1)](b.index,d);
e===!1||f.close(b.index)}
}
),d.find("."+h[7]).on("click",a),g.shadeClose&&c("#layui-layer-shade"+b.index).on("click",function(){
f.close(b.index)}
),d.find(".layui-layer-min").on("click",function(){
f.min(b.index,g),g.min&&g.min(d)}
),d.find(".layui-layer-max").on("click",function(){
c(this).hasClass("layui-layer-maxmin")?(f.restore(b.index),g.restore&&g.restore(d)):(f.full(b.index,g),g.full&&g.full(d))}
),g.end&&(e.end[b.index]=g.end)}
,e.reselect=function(){
c.each(c("select"),function(a,b){
var d=c(this);
d.parents("."+h[0])[0]||1==d.attr("layer")&&c("."+h[0]).length<1&&d.removeAttr("layer").show(),d=null}
)}
,g.pt.IE6=function(a){
function b(){
a.css({
top:f+(e.config.fix?d.scrollTop():0)}
)}
var e=this,f=a.offset().top;
b(),d.scroll(b),c("select").each(function(a,b){
var d=c(this);
d.parents("."+h[0])[0]||"none"===d.css("display")||d.attr({
layer:"1"}
).hide(),d=null}
)}
,g.pt.openLayer=function(){
var a=this;
f.zIndex=a.config.zIndex,f.setTop=function(a){
var b=function(){
f.zIndex++,a.css("z-index",f.zIndex+1)}
;
return f.zIndex=parseInt(a[0].style.zIndex),a.on("mousedown",b),f.zIndex}
}
,e.record=function(a){
var b=[a.outerWidth(),a.outerHeight(),a.position().top,a.position().left+parseFloat(a.css("margin-left"))];
a.find(".layui-layer-max").addClass("layui-layer-maxmin"),a.attr({
area:b}
)}
,e.rescollbar=function(a){
h.html.attr("layer-full")==a&&(h.html[0].style.removeProperty?h.html[0].style.removeProperty("overflow"):h.html[0].style.removeAttribute("overflow"),h.html.removeAttr("layer-full"))}
,a.layer=f,f.getChildFrame=function(a,b){
return b=b||c("."+h[4]).attr("times"),c("#"+h[0]+b).find("iframe").contents().find(a)}
,f.getFrameIndex=function(a){
return c("#"+a).parents("."+h[4]).attr("times")}
,f.iframeAuto=function(a){
if(a){
var b=f.getChildFrame("html",a).outerHeight(),d=c("#"+h[0]+a),e=d.find(h[1]).outerHeight()||0,g=d.find("."+h[6]).outerHeight()||0;
d.css({
height:b+e+g}
),d.find("iframe").css({
height:b}
)}
}
,f.iframeSrc=function(a,b){
c("#"+h[0]+a).find("iframe").attr("src",b)}
,f.style=function(a,b){
var d=c("#"+h[0]+a),f=d.attr("type"),g=d.find(h[1]).outerHeight()||0,i=d.find("."+h[6]).outerHeight()||0;
(f===e.type[1]||f===e.type[2])&&(d.css(b),f===e.type[2]&&d.find("iframe").css({
height:parseFloat(b.height)-g-i}
))}
,f.min=function(a,b){
var d=c("#"+h[0]+a),g=d.find(h[1]).outerHeight()||0;
e.record(d),f.style(a,{
width:180,height:g,overflow:"hidden"}
),d.find(".layui-layer-min").hide(),"page"===d.attr("type")&&d.find(h[4]).hide(),e.rescollbar(a)}
,f.restore=function(a){
var b=c("#"+h[0]+a),d=b.attr("area").split(",");
b.attr("type");
f.style(a,{
width:parseFloat(d[0]),height:parseFloat(d[1]),top:parseFloat(d[2]),left:parseFloat(d[3]),overflow:"visible"}
),b.find(".layui-layer-max").removeClass("layui-layer-maxmin"),b.find(".layui-layer-min").show(),"page"===b.attr("type")&&b.find(h[4]).show(),e.rescollbar(a)}
,f.full=function(a){
var b,g=c("#"+h[0]+a);
e.record(g),h.html.attr("layer-full")||h.html.css("overflow","hidden").attr("layer-full",a),clearTimeout(b),b=setTimeout(function(){
var b="fixed"===g.css("position");
f.style(a,{
top:b?0:d.scrollTop(),left:b?0:d.scrollLeft(),width:d.width(),height:d.height()}
),g.find(".layui-layer-min").hide()}
,100)}
,f.title=function(a,b){
var d=c("#"+h[0]+(b||f.index)).find(h[1]);
d.html(a)}
,f.close=function(a){
var b=c("#"+h[0]+a),d=b.attr("type");
if(b[0]){
if(d===e.type[1]&&"object"===b.attr("conType")){
b.children(":not(."+h[5]+")").remove();
for(var g=0;
2>g;
g++)b.find(".layui-layer-wrap").unwrap().hide()}
else{
if(d===e.type[2])try{
var i=c("#"+h[4]+a)[0];
i.contentWindow.document.write(""),i.contentWindow.close(),b.find("."+h[5])[0].removeChild(i)}
catch(j){
}
b[0].innerHTML="",b.remove()}
c("#layui-layer-moves,#layui-layer-shade"+a).remove(),f.ie6&&e.reselect(),e.rescollbar(a),c(document).off("keydown",e.enter),"function"==typeof e.end[a]&&e.end[a](),delete e.end[a]}
}
,f.closeAll=function(a){
c.each(c("."+h[0]),function(){
var b=c(this),d=a?b.attr("type")===a:1;
d&&f.close(b.attr("times")),d=null}
)}
;
var i=f.cache||{
}
,j=function(a){
return i.skin?" "+i.skin+" "+i.skin+"-"+a:""}
;
f.prompt=function(a,b){
a=a||{
}
,"function"==typeof a&&(b=a);
var d,e=2==a.formType?'<textarea class="layui-layer-input">'+(a.value||"")+"</textarea>":function(){
return'<input type="'+(1==a.formType?"password":"text")+'" class="layui-layer-input" value="'+(a.value||"")+'">'}
();
return f.open(c.extend({
btn:["确
定
","取
消
"],content:e,skin:"layui-layer-prompt"+j("prompt"),success:function(a){
d=a.find(".layui-layer-input"),d.focus()}
,yes:function(c){
var e=d.val();
""===e?d.focus():e.length>(a.maxlength||500)?f.tips("最
多
输
入
"+(a.maxlength||500)+"个
字
数
",d,{
tips:1}
):b&&b(e,c,d)}
}
,a))}
,f.tab=function(a){
a=a||{
}
;
var b=a.tab||{
}
;
return f.open(c.extend({
type:1,skin:"layui-layer-tab"+j("tab"),title:function(){
var a=b.length,c=1,d="";
if(a>0)for(d='<span class="layui-layer-tabnow">'+b[0].title+"</span>";
a>c;
c++)d+="<span>"+b[c].title+"</span>";
return d}
(),content:'<ul class="layui-layer-tabmain">'+function(){
var a=b.length,c=1,d="";
if(a>0)for(d='<li class="layui-layer-tabli xubox_tab_layer">'+(b[0].content||"no content")+"</li>";
a>c;
c++)d+='<li class="layui-layer-tabli">'+(b[c].content||"no content")+"</li>";
return d}
()+"</ul>",success:function(b){
var d=b.find(".layui-layer-title").children(),e=b.find(".layui-layer-tabmain").children();
d.on("mousedown",function(b){
b.stopPropagation?b.stopPropagation():b.cancelBubble=!0;
var d=c(this),f=d.index();
d.addClass("layui-layer-tabnow").siblings().removeClass("layui-layer-tabnow"),e.eq(f).show().siblings().hide(),"function"==typeof a.change&&a.change(f)}
)}
}
,a))}
,f.photos=function(b,d,e){
function g(a,b,c){
var d=new Image;
return d.src=a,d.complete?b(d):(d.onload=function(){
d.onload=null,b(d)}
,void(d.onerror=function(a){
d.onerror=null,c(a)}
))}
var h={
}
;
if(b=b||{
}
,b.photos){
var i=b.photos.constructor===Object,k=i?b.photos:{
}
,l=k.data||[],m=k.start||0;
if(h.imgIndex=(0|m)+1,b.img=b.img||"img",i){
if(0===l.length)return f.msg("没
有
图
片
")}
else{
var n=c(b.photos),o=function(){
l=[],n.find(b.img).each(function(a){
var b=c(this);
b.attr("layer-index",a),l.push({
alt:b.attr("alt"),pid:b.attr("layer-pid"),src:b.attr("layer-src")||b.attr("src"),thumb:b.attr("src")}
)}
)}
;
if(o(),0===l.length)return;
if(d||n.on("click",b.img,function(){
var a=c(this),d=a.attr("layer-index");
f.photos(c.extend(b,{
photos:{
start:d,data:l,tab:b.tab}
,full:b.full}
),!0),o()}
),!d)return}
h.imgprev=function(a){
h.imgIndex--,h.imgIndex<1&&(h.imgIndex=l.length),h.tabimg(a)}
,h.imgnext=function(a,b){
h.imgIndex++,h.imgIndex>l.length&&(h.imgIndex=1,b)||h.tabimg(a)}
,h.keyup=function(a){
if(!h.end){
var b=a.keyCode;
a.preventDefault(),37===b?h.imgprev(!0):39===b?h.imgnext(!0):27===b&&f.close(h.index)}
}
,h.tabimg=function(a){
l.length<=1||(k.start=h.imgIndex-1,f.close(h.index),f.photos(b,!0,a))}
,h.event=function(){
h.bigimg.hover(function(){
h.imgsee.show()}
,function(){
h.imgsee.hide()}
),h.bigimg.find(".layui-layer-imgprev").on("click",function(a){
a.preventDefault(),h.imgprev()}
),h.bigimg.find(".layui-layer-imgnext").on("click",function(a){
a.preventDefault(),h.imgnext()}
),c(document).on("keyup",h.keyup)}
,h.loadi=f.load(1,{
shade:"shade"in b?!1:.9,scrollbar:!1}
),g(l[m].src,function(d){
f.close(h.loadi),h.index=f.open(c.extend({
type:1,area:function(){
var e=[d.width,d.height],f=[c(a).width()-50,c(a).height()-50];
return!b.full&&e[0]>f[0]&&(e[0]=f[0],e[1]=e[0]*d.height/d.width),[e[0]+"px",e[1]+"px"]}
(),title:!1,shade:.9,shadeClose:!0,closeBtn:!1,move:".layui-layer-phimg img",moveType:1,scrollbar:!1,moveOut:!0,shift:5*Math.random()|0,skin:"layui-layer-photos"+j("photos"),content:'<div class="layui-layer-phimg"><img src="'+l[m].src+'" alt="'+(l[m].alt||"")+'" layer-pid="'+l[m].pid+'"><div class="layui-layer-imgsee">'+(l.length>1?'<span class="layui-layer-imguide"><a href="javascript:;
" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;
" class="layui-layer-iconext layui-layer-imgnext"></a></span>':"")+'<div class="layui-layer-imgbar" style="display:'+(e?"block":"")+'"><span class="layui-layer-imgtit"><a href="javascript:;
">'+(l[m].alt||"")+"</a><em>"+h.imgIndex+"/"+l.length+"</em></span></div></div></div>",success:function(a,c){
h.bigimg=a.find(".layui-layer-phimg"),h.imgsee=a.find(".layui-layer-imguide,.layui-layer-imgbar"),h.event(a),b.tab&&b.tab(l[m],a)}
,end:function(){
h.end=!0,c(document).off("keyup",h.keyup)}
}
,b))}
,function(){
f.close(h.loadi),f.msg("当
前
图
片
地
址
异
常
<br>是
否
继
续
查
看
下
一
张
?
",{
time:3e4,btn:["下
一
张
","不
看
了
"],yes:function(){
l.length>1&&h.imgnext(!0,!0)}
}
)}
)}
}
,e.run=function(){
c=jQuery,d=c(a),h.html=c("html"),f.open=function(a){
var b=new g(a);
return b.index}
}
,"function"==typeof define?define(function(){
return e.run(),f}
):function(){
e.run(),f.use("skin/layer.css")}
()}
(window);