图片预览

最新推荐文章于 2024-09-13 23:40:08 发布

極鬥飛星

最新推荐文章于 2024-09-13 23:40:08 发布

阅读量118

点赞数

分类专栏： JS 文章标签：图片预览

本文链接：https://blog.csdn.net/my7377/article/details/83986871

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

图片预览（基于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>