欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

图片预览

程序员文章站 2022-07-13 15:31:30
...
图片预览（基于jQery开发）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jQuery1.11.3.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        li {
            width: 180px;
            height: 180px;
            border-radius: 8px;
            border: 1px solid #cccc;
            display: inline-block;
            overflow: hidden;
        }

        img {

        }

        .myImage {
            /*display: inline-block;*/
            position: fixed;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            left: 50%;
            display: none;
            border-radius: 10px;
            z-index: 2;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            background: #000;
            opacity: .3;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
</head>
<body>

<ul>
    <li><img src="../images/1.jpg" data-id="1001" alt=""></li>
    <li><img src="../images/2.jpg" data-id="1002" alt=""></li>
    <li><img src="../images/3.jpg" data-id="1003" alt=""></li>
    <li><img src="../images/inter.png" data-id="1004" alt=""></li>
    <li><img src="../images/Jellyfish.jpg" data-id="1005" alt=""></li>
    <li><img src="../images/Koala.jpg" data-id="1006" alt=""></li>
    <li><img src="../images/layout2.jpg" data-id="1007" alt=""></li>
    <li><img src="../images/Lighthouse.jpg" data-id="1008" alt=""></li>
    <li><img src="../images/logo.png" data-id="1009" alt=""></li>
    <li><img src="../images/4.png" data-id="1010" alt=""></li>
    <li><img src="../images/5.png" data-id="1011" alt=""></li>
</ul>


<img src="../images/layout2.jpg" class="myImage" alt="">
<div class="mask"></div>
<script>
    var picID = "";
    $(function () {
        // 图片父级点击事件
        $("li").click(function () {
            autoWH();
            picID = $(this).children("img").attr("data-id");
            $(".myImage").attr("src", $(this).children("img").attr("src"));
            resSetMyImageWH();
            $(".mask,.myImage").show();
        });
        // 放大预览图点击隐藏
        $(".myImage").click(function () {
            $(".myImage,.mask").hide();
            picID = "";
        });
        // 遮罩层点击隐藏
        $(".mask").click(function () {
            $(".myImage,.mask").hide();
        });

    });
    // 重新设置预览图的大小
    function autoWH() {
        $(".myImage").css({
            width: "auto",
            height: "auto",
        });
    }
    // 获取小图的Src,并复制给大预览图显示
    function getSRC() {
        var imgList = $("li img");
        autoWH();
        for (var i in imgList) {
            if ($(imgList[i]).attr("data-id") == picID) {
                $(".myImage").attr("src", $(imgList[i]).attr("src"));
                resSetMyImageWH();
                return;
            }
        }
    }
    // 根据小图重新计算大图的宽高
    function resSetMyImageWH() {
        var width = $(".myImage").width();
        var height = $(".myImage").height();
        var wh = resWH({
            width: width,
            height: height
        });
        $(".myImage").css({
            width: wh.width,
            height: wh.height,
        });
    }
    // 计算大图宽高方法
    function resWH(wh) {
        var w = wh.width;
        var h = wh.height;
        var seeWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var seeHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (w > seeWidth) {
            var b1 = seeWidth / w; // 缩小倍数
            return {
                width: w * b1,
                height: h * b1
            }
        } else if (h > seeHeight) {
            var b2 = seeHeight / h;// 缩小倍数
            return {
                width: w * b2,
                height: h * b2
            }
        } else {
            return {
                width: w,
                height: h
            }
        }


    }
    // 左右方向键、Esc键按下事件
    $(document).keydown(function (e) {
        var code = e.keyCode;
        if (!picID) {
            return;
        }
        if (code == 39) { // 向右 ++
            // 获取最后一个值
            var last = $("li").children("img:last").attr("data-id");
            console.log(last);
            if (picID == last) {
                alert("后面没有了")
                return;
            }
            picID++;
            getSRC();

        } else if (code == 37) { // 向左 --
            var first = $("li").children("img:first").attr("data-id");
            console.log(first);
            if (picID == first) {
                alert("前面没有了")
                return;
            }

            picID--;
            getSRC();
        } else if (code == 27) { // Esc
            $(".myImage,.mask").hide();
        }

    });
</script>

</body>
</html>
相关标签： 图片预览

上一篇： 本地 Java 程序连接 Hbase AccessDeniedException 问题

下一篇： 雪花算法工具类SnowFlakeUtils生成全局唯一ID

推荐阅读