当前位置：网站首页>Simple picture preview

Simple picture preview

2022-06-12 12:37:00 【Five flower hourglass】 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Simple picture preview </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style> .imgDolage {
       width: 100%; height: 100%; background: rgba(000, 000, 000, .7); position: fixed; top: 0; left: 0; bottom: 0; z-index: 12; display: flex; justify-content: center; align-items: center; overflow: auto; } .imagesBody {
       border: 5px solid #fff; cursor: pointer; height: 90%; } .dis {
       display: none !important; } .img-small {
       width: 300px; height: 180px; border: 5px solid #333; } </style>

<body>
    <img class="img-small" src="https://cn.vuejs.org/images/logo.svg" onclick="imgShow()">
    <div class="imgDolage dis">
        <img class="imagesBody" src="" alt="">
    </div>
</body>
<script> function imgShow() {
       //  Always point to event bound elements , and  Event.target  Is the event triggered element . var is = event.currentTarget $('.imgDolage').removeClass('dis') $('.imgDolage img').attr('src', is.getAttribute('src')) } let ActiveImages = false $(".imgDolage").click(function (e) {
       let _con = $('.imagesBody'); //  Set the target area  if (!_con.is(e.target) && _con.has(e.target).length === 0) {
       //  Click on the area outside the picture , Stow preview  $('.imgDolage').addClass('dis') ActiveImages = false } else {
       //  Click on the image ： Zoom in and out  if (ActiveImages) {
       _con.css('top', '5%') _con.css('height', '90%') ActiveImages = false } else {
       _con.css('top', '0%') _con.css('height', 'auto') ActiveImages = true } } }); </script>
</html>

Click the small figure in the upper left corner

Click the small picture in the upper left corner to open the preview pop-up window , Click the picture in the preview pop-up window to further enlarge , Click again to shrink back to the original size . Click the mask layer area outside the picture to close the preview pop-up window .

原网站

版权声明
本文为[Five flower hourglass]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203010518568952.html

边栏推荐

猜你喜欢

随机推荐