相册层 增加放大缩小旋转 功能

pull/43/head
HuRui 2017-02-25 22:03:09 +08:00 committed by hurui
parent eabdf407c6
commit 52a0a5090f
14 changed files with 718 additions and 46 deletions

View File

@ -10,6 +10,7 @@
* 完善多按钮场景换行的间距(之前是紧贴在一起,略不雅观)
* 弹出图片层的动画时间改为800ms
* 修复按方向键切换图片层过快时重复弹出的bug
* 修复与animate.css可能存在的动画冲突
---

File diff suppressed because one or more lines are too long

View File

@ -1195,10 +1195,22 @@ layer.photos = function(options, loop, key){
anim: Math.random()*5|0,
skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">'
+'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
+'<div class="thumbnails">'
+'<span class="thumbClose" title="关闭缩略图"><i class="icon_close-small"></i></span>'
+'<img ondragstart="return false;"/>'
+'<div class="thumbDrag"><span></span></div>'
+'</div>'
+'<img class="image active" src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
+'<div class="layui-layer-imgsee">'
+(data.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:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt||'') +'</a><em>'+ dict.imgIndex +'/'+ data.length +'</em></span></div>'
+(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev" title="'+ dict.imgIndex +'/'+ data.length +'"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext" title="'+ dict.imgIndex +'/'+ data.length +'"></a></span>' : '')
+'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'">'
+'<div class="tool">'
+'<div class="toolct">' +
+'<span class="oper_fullscreen" title="查看全屏"><i class="icon_tool-fullscreen"></i></span>'
+ '<span class="oper_bigger" title="放大图片"><i class="icon_tool-bigger"></i></span>'
+ '<span class="oper_smaller" title="缩小图片"><i class="icon_tool-smaller"></i></span>'
+ '<span class="oper_rotate" title="向右旋转"><i class="icon_tool-rotate"></i></span>'
+ '<a class="oper_download" title="下载图片" href="'+data[start].src+'" download="'+(data[start].alt || 5 * Math.random() | 0)+'"><i class="icon_tool-download"></i></a>'
+'</div>'
+'</div>',
success: function(layero, index){
@ -1206,7 +1218,457 @@ layer.photos = function(options, loop, key){
dict.imgsee = layero.find('.layui-layer-imguide,.layui-layer-imgbar');
dict.event(layero);
options.tab && options.tab(data[start], layero);
typeof success === 'function' && success(layero);
typeof success === 'function' && success(layero);
/*
图片查看插件
*/
var windowMargin = 8;
var isFirefox = navigator.userAgent.indexOf("Firefox") > -1 ;
var MOUSEWHEEL_EVENT = isFirefox ? "DOMMouseScroll" : "mousewheel";
var o = {
//图片缩放倍率
ratio: 1.2,
//右下角缩略图宽度
thumbnailsWidth: 180,
//右下角缩略图高度
thumbnailsHeight: 120
};
var $tool = $(".layui-layer-phimg").find(".tool"),
$fullscreen = $(".layui-layer-phimg").find(".oper_fullscreen"),
$bigger = $(".layui-layer-phimg").find(".oper_bigger"),
$smaller = $(".layui-layer-phimg").find(".oper_smaller"),
$rotate = $(".layui-layer-phimg").find(".oper_rotate"),
$download = $(".layui-layer-phimg").find(".oper_download"),
$thumbnails = $(".layui-layer-phimg").find(".thumbnails"),
$gallery = $(".layui-layer-phimg"),
$image = $(".layui-layer-phimg>.image"),
$thumbImg,
imageWidth,
imageHeight,
imgRatio,
dragX,
dragY,
cW,
cH,
w,h,isVertical,
thumbX,
thumbY;
//缩略图
$thumbnails.css({
height: o.thumbnailsHeight,
width : o.thumbnailsWidth
}).on("mouseenter",function(e){
thumbX = -1;
}).on("mousedown",function(e){
thumbX=e.pageX || e.clientX;
thumbY=e.pageY || e.clientY;
cW = document.body.clientWidth;
cH = document.body.clientHeight;
e.stopPropagation();
}).on("mousemove",function(e){
if(thumbX > 0){
var nextDragX=e.pageX || e.clientX;
var nextDragY=e.pageY || e.clientY;
var $td= $(this).find(".thumbDrag"),
imageWidth = $image.width(),
imageHeight = $image.height(),
thumbImgWidth = $thumbImg.width(),
thumbImgHeight = $thumbImg.height(),
left =parseFloat($td.css("left")) + (nextDragX - thumbX),
top =parseFloat($td.css("top")) + (nextDragY - thumbY),
w = $td.width(),
h = $td.height(),
it,
il,
maxL,
maxT;
if(isVertical){
thumbImgWidth = [thumbImgHeight, thumbImgHeight = thumbImgWidth][0];
imageWidth = [imageHeight, imageHeight = imageWidth][0];
}
it = (o.thumbnailsHeight - thumbImgHeight) / 2 ,
il = (o.thumbnailsWidth - thumbImgWidth) / 2,
maxL = o.thumbnailsWidth - w - il - 2, //减去2像素边框部分
maxT = o.thumbnailsHeight - h - it - 2;
if(left < il ) left = il;
else if(left > maxL) left = maxL;
if(top < it ) top = it;
else if(top > maxT) top = maxT;
$td.css({
left : left,
top : top
})
thumbX=nextDragX;
thumbY=nextDragY;
if(imageWidth < cW) left = (cW - imageWidth) / 2;
else left = -imageWidth * (left-il) / thumbImgWidth;
if(imageHeight < cH ) top = (cH - imageHeight) / 2;
else top = -imageHeight * (top-it) / thumbImgHeight;
$image.offset({
left : left,
top : top
});
}
}).on("mouseup",function(e){
thumbX = -1;
});
$thumbnails.find(".thumbClose").on("click",function(){
$thumbnails.hide();
});
//显示工具栏
$gallery.on("mouseover",function(e){
$tool.show();
}).on("mouseenter",function(e){
dragX = -1;
}).on("mouseout",function(e){
$tool.hide();
}).on("mousedown",function(e){
dragX=e.pageX || e.clientX;
dragY=e.pageY || e.clientY;
cW = document.body.clientWidth;
cH = document.body.clientHeight;
e.stopPropagation();
}).on("mousemove",function(e){
if(dragX > 0){
var nextDragX=e.pageX || e.clientX;
var nextDragY=e.pageY || e.clientY ;
var o = $image.offset(),
left =o.left + (nextDragX - dragX),
top =o.top + (nextDragY - dragY),
w = $image.width(),
h = $image.height();
if(isVertical){
w = [h, h = w][0];
}
if(w > cW){
if(left > 0){
left = 0 ;
}
else if(left < cW - w){
left = cW - w;
}
}else{
left = o.left;
}
if(h > cH){
if(top > 0){
top = 0 ;
}
else if(top < cH - h){
top = cH - h;
}
} else{
top = o.top;
}
$image.offset({
left : left,
top : top
});
dragX=nextDragX;
dragY=nextDragY;
setThumbnails(); //缩略图拖拽点
}
}).on("mouseup",function(e){
dragX = -1;
});
//全屏
var isMax,
preWidth= $gallery.width(),
preHeight= $gallery.height(),
preTop= $("#layui-layer"+index).css("top"),
preLeft= $("#layui-layer"+index).css("left");
$fullscreen.on("click", function(){
if(!isMax){
layer.style(index, {
width: '100%',
height: '100%',
left:'0px',
top:'0px'
});
isMax = true;
}
else {
layer.style(index, {
width: preWidth,
height: preHeight,
left:preLeft,
top:preTop
});
isMax = false;
}
setImagePosition();
});
//放大图片
$bigger.on("click", function(){
biggerImage();
});
//缩小图片
$smaller.on("click", function(){
smallerImage();
});
//旋转
$rotate.on("click", function(){
var rotateClass = $image.attr("class").match(/(rotate)(\d*)/);
if(rotateClass){
var nextDeg = (rotateClass[2] * 1 + 90) % 360;
$image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
$thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
resizeImage(nextDeg);
resizeThumbImg(nextDeg);
isVertical = nextDeg == 90 || nextDeg == 270;
} else{
$image.addClass("rotate90");
$thumbImg.addClass("rotate90");
resizeImage("90");
resizeThumbImg("90");
isVertical = true;
}
});
// //下载
// $download.on("click", function(){
// var imgUrl = $image.attr("src");
// if(!imgUrl) return;
// alert("没有找到兼容所有浏览器方法,所以暂不实现");
// });
$(window).on("resize",function(){
setImagePosition();
});
if(document.attachEvent){
document.attachEvent("on"+MOUSEWHEEL_EVENT, function(e){
mouseWheelScroll(e);
});
} else if(document.addEventListener){
document.addEventListener(MOUSEWHEEL_EVENT, function(e){
mouseWheelScroll(e);
}, false);
}
function mouseWheelScroll(e){
var _delta = parseInt(e.wheelDelta || -e.detail);
//向上滚动
if (_delta > 0) {
biggerImage();
}
//向下滚动
else {
smallerImage();
}
}
function init(){
toggleImage();
}
function toggleImage(){
imageWidth = $image.width();
imageHeight = $image.height();
var imgarea = [imageWidth, imageHeight];
var winarea = [$(window).width() - 100, $(window).height() - 100];
if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){//如果 实际图片的宽或者高比 屏幕大(那么进行缩放)
var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];//取 宽度 缩放比例 高度缩放比例
if(wh[0] > wh[1]){//取缩放比例最大的进行缩放
imgarea[0] = imgarea[0]/wh[0];
imgarea[1] = imgarea[1]/wh[0];
}
else if(wh[0] < wh[1]){
imgarea[0] = imgarea[0]/wh[1];
imgarea[1] = imgarea[1]/wh[1];
}
}
$image.width(imgarea[0] + "px");
$image.height(imgarea[1] + "px");
imgRatio = imageWidth/ imageHeight;
$thumbImg = $thumbnails.find("img").attr("src", $image.attr("src"));
$thumbnails.find("img").removeAttr("class").removeAttr("style");
isVertical = false;
$thumbnails.hide();
setImagePosition();
}
function biggerImage(){
var w = $image.width(),
h = $image.height(),
nextW = w * o.ratio,
nextH = h * o.ratio;
if(nextW - w < 1) nextW = Math.ceil(nextW);
var percent = (nextW / imageWidth * 100).toFixed(0) ;
if(percent > 90 && percent < 110){
percent = 100;
nextW = imageWidth;
nextH = imageHeight;
}
else if(percent > 1600) {
percent = 1600;
nextW = imageWidth * 16;
nextH = imageHeight * 16;
}
$image.width(nextW).height(nextH);
setImagePosition();
showPercentTip(percent);
showThumbnails(nextW, nextH);
}
function smallerImage(){
var w = $image.width(),
h = $image.height(),
nextW,
nextH;
var percent = (w / o.ratio / imageWidth * 100).toFixed(0) ;
if(percent < 5) {
percent = 5;
nextW = imageWidth / 20;
nextH = imageHeight / 20;
}
else if(percent > 90 && percent < 110){
percent = 100;
nextW = imageWidth;
nextH = imageHeight;
} else{
nextW = w / o.ratio;
nextH = h / o.ratio;
}
$image.width(nextW).height(nextH);
setImagePosition();
showPercentTip(percent);
showThumbnails(nextW, nextH);
}
//显示缩略图
function showThumbnails(width, height){
if(isVertical) width = [height, height = width][0];
if(width > document.body.clientWidth || height > document.body.clientHeight){
$thumbnails.show();
setThumbnails();
} else{
$thumbnails.hide();
}
}
//重置图片宽高
function resizeImage(rotateDeg){
var mH = document.body.clientHeight - windowMargin,
mW = document.body.clientWidth - windowMargin;
if(rotateDeg == '90' || rotateDeg == '270'){
mW = [mH, mH = mW][0];
}
var width, height;
width = Math.min(imageWidth, mW);
height = Math.min(imageHeight, mH);
if(width / height > imgRatio){
width = height * imgRatio;
} else{
height = width / imgRatio;
}
$image.css({
width:width,
height:height
});
setImagePosition();
}
function resizeThumbImg(rotateDeg){
var maxW = o.thumbnailsWidth, maxH = o.thumbnailsHeight;
if(rotateDeg == '90' || rotateDeg == '270'){
maxW = [maxH, maxH = maxW][0];
}
$thumbImg.css({
maxWidth : maxW,
maxHeight : maxH
});
$thumbnails.hide();
}
//显示百分比提示
function showPercentTip(percent){
$gallery.find(".percentTip").remove();
$("<div class='percentTip'><span>"+percent+"%</span></div>").appendTo($gallery).fadeOut(1500);
}
//设置图片位置
function setImagePosition(){
var w = $image.width(),
h = $image.height(),
cW = $gallery.width(),
cH = $gallery.height();
var left = (cW - w)/2,
top = (cH - h)/2;
$image.css("left", left+"px").css("top", top+"px");
}
//设置缩略图拖拽区域
function setThumbnails(){
var $img = $thumbnails.find("img"),
sW = $img.width(),
sH = $img.height(),
w = $image.width(),
h = $image.height(),
imf = $image.offset(),
imfl = imf.left,
imft = imf.top,
cW = document.body.clientWidth,
cH = document.body.clientHeight,
tW,
tH,
tl,
tt;
if(isVertical){
sW = [sH, sH = sW][0];
w = [h, h = w][0];
}
tW = sW / (w / cW);
if(w < cW) tW = sW;
tH = sH / (h / cH);
if(h < cH) tH = sH;
tl = (o.thumbnailsWidth - sW)/2 + -imfl/w * sW ;
if(w < cW) tl = (o.thumbnailsWidth - sW)/2;
tt = (o.thumbnailsHeight - sH)/2 + -imft/h * sH ;
if(h < cH) tt = (o.thumbnailsHeight - sH)/2;
$thumbnails.find(".thumbDrag").css({
width: tW,
height: tH,
left: tl,
top: tt
});
}
init();
/*
图片查看器结束
*/
}, end: function(){
dict.end = true;
$(document).off('keyup', dict.keyup);

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 465 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 360 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 502 B

View File

@ -28,27 +28,27 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
/* 动画 */
.layui-layer{border-radius: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;}
@-webkit-keyframes bounceIn { /* 默认 */
@-webkit-keyframes layer-bounceIn { /* 默认 */
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)}
}
@keyframes bounceIn {
@keyframes layer-bounceIn {
0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)}
100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)}
}
.layer-anim{-webkit-animation-name: bounceIn;animation-name: bounceIn}
.layer-anim{-webkit-animation-name: layer-bounceIn;animation-name: layer-bounceIn}
@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}
@-webkit-keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:layer-zoomInDown;animation-name:layer-zoomInDown}
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig}
@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}
@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft}
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:rollIn;animation-name:rollIn}
@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
/* 标题栏 */
.layui-layer-title{padding:0 80px 0 20px; height:42px; line-height:42px; border-bottom:1px solid #eee; font-size:14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #F8F8F8; border-radius: 2px 2px 0 0;}
@ -147,9 +147,10 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
.xubox_tabclose{position:absolute; right:10px; top:5px; cursor:pointer;}
/* photo模式 */
.layui-layer-phimg{width: 100%;height: 100%;}
.layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;}
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;}
.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-photos .layui-layer-phimg img{display: inline-block; *display:inline; *zoom:1; vertical-align:top;}
.layui-layer-imguide,.layui-layer-imgbar{display:none;}
.layui-layer-imgprev, .layui-layer-imgnext{position:absolute; top:50%; width:27px; _width:44px; height:44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());}
.layui-layer-imgprev{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
@ -163,21 +164,237 @@ html #layuicss-skinlayercss{display: none; position: absolute; width: 1989px;}
.layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;}
.layui-layer-imgtit em{padding-left:10px; font-style: normal;}
/* 关闭动画 */
@-webkit-keyframes bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)}
30% {-webkit-transform: scale(1.05); transform: scale(1.05)}
0% {-webkit-transform: scale(1); transform: scale(1);}
}
@keyframes bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);}
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}
.layer-anim-close{-webkit-animation-name: bounceOut;animation-name: bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
@media screen and (max-width: 1100px) {
.layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
}
.winControl {
position: absolute;
right: 0;
top: 0;
z-index: 99999;
}
.winControl span {
display: inline-block;
padding: 4px 6px;
cursor: pointer;
line-height: 10px;
}
.winControl span:hover {
background: #E82B45;
}
[drag] {
-webkit-app-region: drag;
}
[noDrag] {
-webkit-app-region: no-drag;
}
i{
position: relative;
z-index:99999;
display: inline-block;
}
.icon_close-big{
width: 18px;
height: 18px;
background-image: url('icon/close_big.png');
}
.icon_close-small{
width: 13px;
height: 13px;
background-image: url('icon/close_small.png');
display: inline-block;
}
.icon_tool-fullscreen{
width: 18px;
height: 18px;
background-image: url('icon/full_screen.png');
}
.icon_tool-bigger{
width: 20px;
height: 19px;
background-image: url('icon/bigger.png');
}
.icon_tool-smaller{
width: 20px;
height: 19px;
background-image: url('icon/smaller.png');
}
.icon_tool-rotate{
width: 17px;
height: 20px;
background-image: url('icon/rotate.png');
}
.icon_tool-download{
width: 16px;
height: 20px;
background-image: url('icon/download.png');
}
.icon_tool-prev{
width: 22px;
height: 38px;
background-image: url('icon/prev.png');
}
.icon_tool-next{
width: 22px;
height: 38px;
background-image: url('icon/next.png');
}
/* 效果 */
.rotate0{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.rotate90{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.rotate180{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.rotate270{
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
@keyframes layer-bounceOut {
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);}
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}
.layer-anim-close{-webkit-animation-name: layer-bounceOut;animation-name: layer-bounceOut; -webkit-animation-duration:.2s; animation-duration:.2s;}
@media screen and (max-width: 1100px) {
.layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
}
.image{
position: absolute;
margin:0; /*之所以不使用auto直接垂直居中是因为当图片旋转时left值会很难计算*/
padding:0;
z-index: -1;
display: none;
}
.image.active{
display:block;
}
.tool{
position: absolute;
width: 100%;
text-align: center;
display: none;
z-index: 99999;
}
.toolct{
display: inline-block;
height: 30px;
background-color: #6f6965;
padding: 5px 14px;
box-sizing: border-box;
border-radius: 6px;
}
.toolct a{
margin-right: 20px;
}
.toolct span{
margin-right: 20px;
}
.toolct i{
display: inline-block;
cursor: pointer;
}
.percentTip{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 100px;
height: 30px;
z-index: 9999;
text-align: center;
line-height: 30px;
font-size: 16px;
border-radius: 8px;
color: #ffffff;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4F504E',endColorStr='#151313',gradientType='1');
background: linear-gradient(315deg, #4F504E, #151313);
background: -moz-linear-gradient(315deg, #4F504E, #151313);
background: -o-linear-gradient(left,#4F504E, #151313);
background: -webkit-gradient(linear,100% 0%, 100% 0%, from(#4F504E), to(#151313));
}
.thumbnails{
position: absolute;
right: 1px;
bottom: 1px;
border: 1px solid #ffffff;
z-index: 99999;
border-radius: 5px;
background-color: rgba(177, 177, 177, 0.5);
display: none;
}
.thumbnails .thumbDrag{
position: absolute;
top: 0;
bottom: 0;
width: 100px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.thumbnails .thumbDrag span{
width:100%;
height:100%;
border: 1px solid white;
display: block;
box-sizing: border-box;
}
.thumbnails .thumbClose{
position: absolute;
right: 1px;
top: -2px;
cursor: pointer;
height: 13px;
}
.thumbnails img{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.oper{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
height: 38px;
z-index: 99999;
}
.oper i{
display: none;
cursor: pointer;
}
.oper span{
width: 22px;
height: 38px;
}
.oper .prev{
float:left;
margin-left: 9px;
}
.oper .next{
float:right;
margin-right: 9px;
}
.oper .prev.active i, .oper .next.active i{
display: inline-block;
}

View File

@ -6,7 +6,7 @@
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="../build/layer.js"></script>
<script src="../src/layer.js"></script>
<style>
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
@ -18,7 +18,7 @@
.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;}
.layer-photos-demo img{width:200px;}
</style>
</head>
<body>
@ -38,7 +38,12 @@
六、layer遵循LGPL协议将永久性提供无偿服务。版权最终解释权贤心。
</pre>
</div>
<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370038114&di=f0daa074625c17c69a5fb32c2bdbd539&imgtype=0&src=http%3A%2F%2F5.595818.com%2Fresource%2Fsoftware%2F000%2F012%2F8921f9deb38bc002007663788b16a11c.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370038114&di=f0daa074625c17c69a5fb32c2bdbd539&imgtype=0&src=http%3A%2F%2F5.595818.com%2Fresource%2Fsoftware%2F000%2F012%2F8921f9deb38bc002007663788b16a11c.jpg" alt="说好的一起Fly" layer-index="0">
<img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370088593&di=d0f708353b8669c93028a71f121f31ae&imgtype=0&src=http%3A%2F%2Fimg002.21cnimg.com%2Fphotos%2Falbum%2F20160326%2Fm600%2FB920004B5414AE4C7D6F2BAB2966491E.jpeg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370088593&di=d0f708353b8669c93028a71f121f31ae&imgtype=0&src=http%3A%2F%2Fimg002.21cnimg.com%2Fphotos%2Falbum%2F20160326%2Fm600%2FB920004B5414AE4C7D6F2BAB2966491E.jpeg" alt="LayIM" layer-index="1">
<img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488964839&di=dc21870ce25fb4a47694e6b127b16e49&imgtype=jpg&er=1&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488964839&di=dc21870ce25fb4a47694e6b127b16e49&imgtype=jpg&er=1&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg" alt="佟丽娅女神" layer-index="2">
<img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370253653&di=38f81ea3150d22adc14adfeba97f2851&imgtype=0&src=http%3A%2F%2Fimg.bbs.cnhubei.com%2Fforum%2Fdvbbs%2F2004-4%2F200441915031894.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370253653&di=38f81ea3150d22adc14adfeba97f2851&imgtype=0&src=http%3A%2F%2Fimg.bbs.cnhubei.com%2Fforum%2Fdvbbs%2F2004-4%2F200441915031894.jpg" alt="凤姐是个好人" layer-index="3">
</div>
<div class="box" style="text-align:center">
<a href="http://layer.layui.com/" target="_blank">更多示例</a>
<a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
@ -49,23 +54,10 @@
<script>
;!function(){
//页面一打开就执行放入ready是为了layer所需配件css、扩展模块加载完毕
layer.ready(function(){
//官网欢迎页
layer.open({
type: 2,
title: 'layer弹层组件官网',
fix: false,
maxmin: true,
shadeClose: true,
area: ['1100px', '600px'],
content: 'http://sentsin.com/jquery/layer/?form=local',
end: function(){
layer.tips('Hi', '#about', {tips: 1})
}
layer.photos({
photos: '#layer-photos-demo'
});
});
//页面一打开就执行放入ready是为了layer所需配件css、扩展模块加载完毕
//关于
$('#about').on('click', function(){