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 }