圖片放大 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 實例1 ``` <body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script> <img class="js-big-img" src="https://img03.sogoucdn.com/app/a/100520146/7262236f11be1217843373cc52aaa8d2" data-url="http://yanxuan.nosdn.127.net/d9c40c8c031434080a032b4dc1fa4099.png"> <script> $(".js-big-img").on("click", function () { var url = $(this).data('url') var htmlText = '<div onclick="this.style.display=\'none\'" ' + 'class="img_show" style=" position: absolute;width: 100%;height: 100%;top:0;left:0;text-align: center; z-index:999999; ">\n' + '<img style="position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%);box-shadow: 1px 1px 9px 4px #dadada;" src="' + url + '" alt=""></div>' $('body').append(htmlText) }) </script> </body> ``` ## 示例2 ``` $('body').on('click',".preview-img",function (){ let src= $(this).attr("src"); $("body").append(`<div onclick="this.style.display='none'" style="position: fixed;top: 0;bottom:0;left:0;right: 0;background-color: rgba(0,0,0,0.4);z-index: 9999999;display: flex;justify-content: center;align-items: center"> <img style="max-width: 80%;height: 80%;" src="${src}" alt=""> </div>`) }) ```