jquery自定义弹层显示大图（兼容多层iframe）
1、介绍
a：可用于多层iframe中，显示在最外层
b：动画效果为从点击的图片位置开始放大至全屏显示
2、效果图
3、js代码
1 function ShowMaxImg(src, y, x, w, h) { 2 var str = '<section id="ShowMaxImgBox">'; 3 str += '<div class="button button-primary ShowMaxImgClose" onclick="window.top.RemoveMaxImg(' + y + ',' + x + ',' + w + ',' + h + ')">'; 4 str += '<i class="ion ion-close"></i>'; 5 str += '</div>'; 6 str += '<section class="ShowMaxImgBg" style=\'width:' + w + 'px;height:' + h + 'px;top:' + y + 'px;left:' + x + 'px;background-image:url(' + src + ')\' onclick="window.top.RemoveMaxImg(' + y + ',' + x + ',' + w + ',' + h + ')">'; 7 str += '</section>'; 8 str += '</section>'; 9 $("#ShowMaxImgBox").remove(); 10 window.top.$("body").append(str); 11 window.top.$("#ShowMaxImgBox .ShowMaxImgBg").animate({ "height": "100vh", "width": "100vw", "left": "0", "top": "0" }, 300, "swing"); 12 } 13 function RemoveMaxImg(y, x, w, h) { 14 $("#ShowMaxImgBox .ShowMaxImgBg").animate({ "height": h + "px", "width": w + "px", "left": x + "px", "top": y + "px" }, 300, "swing", function () { 15 $("#ShowMaxImgBox").remove(); 16 }); 17 } 18 19 function GetPointInScreen(e, x, y) { 20 var point = e.getBoundingClientRect(); 21 x += point.left; 22 y += point.top; 23 if (self != top) { 24 return window.parent.GetPointInScreen(window.parent.$("[name='myIframe']")[0], x, y); 25 } 26 return { x: x, y: y }; 27 } 28 29 $("body").on("click", ".ShowMaxImg,[ShowMaxImg]", function () { 30 var src = ""; 31 if ($(this).attr("ShowMaxImg") != undefined) { 32 src = $(this).attr("ShowMaxImg"); 33 } 34 else { 35 src = $(this).attr("src"); 36 } 37 if (src == "" || src == undefined) { 38 return; 39 } 40 var point = GetPointInScreen(this, 0, 0); 41 var w = $(this).width(); 42 var h = $(this).height(); 43 ShowMaxImg(src, point.y, point.x, w, h); 44 });
4、cs代码
1 #ShowMaxImgBox { 2 position: fixed; 3 width: 100vw; 4 height: 100vh; 5 display: flex !important; 6 background-color: rgba(0,0,0,0.6); 7 /*实现垂直居中*/ 8 align-items: center !important; 9 /*实现水平居中*/ 10 justify-content: center !important; 11 text-align: justify !important; 12 text-decoration: none; 13 -moz-user-select: none; 14 -webkit-user-select: none; 15 -ms-user-select: none; 16 user-select: none; 17 left: 0; 18 top: 0; 19 z-index: 9999; 20 } 21 22 #ShowMaxImgBox .ShowMaxImgBg { 23 z-index: -1; 24 position: absolute; 25 background-repeat: no-repeat; 26 background-position: center; 27 background-size: contain; 28 } 29 30 #ShowMaxImgBox .ShowMaxImgClose { 31 position: absolute; 32 width: 30px; 33 height: 30px; 34 right: 20px !important; 35 top: 20px !important; 36 z-index: 99; 37 } 38 39 #ShowMaxImgBox .ShowMaxImgClose i { 40 font-size: 20px; 41 } 42 43 #ShowMaxImgBox .ShowMaxImgBg p { 44 color: white; 45 position: absolute; 46 bottom: 10px; 47 text-align: center; 48 width: 100%; 49 height: 30px; 50 line-height: 30px; 51 } 52 53 [upload-showmaximg], [ShowMaxImg], .ShowMaxImg { 54 cursor: zoom-in !important; 55 } 56 57 #ShowMaxImgBox .ShowMaxImgBg:hover, #ShowMaxImgBox .ShowMaxImgClose:hover { 58 cursor: zoom-out !important; 59 }
