不想成为大佬的菜鸟不是好菜鸟 2021-05-17 11:09 采纳率: 54.5%
浏览 51

layer 放大点击的图片

存在两个问题：一是放大的图片如何在该界面存在多张，二是点击图片1，就弹出并放大图片1.点击2，弹出并放大图片。注：图片地址是遍历后台数据得到的，然后用jquery添加img标签显示。以下是我的代码，在此谢谢大家了：

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-05-17 11:15
    关注

    那你每次点击就传新的img src就好了    你看看我这个demo 把data里的url换成你的数据

    <!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>Document</title>
</head>

<body>
    <div id="box">

    </div>
</body>
<script src="./layer-v3.5.0/layer/mobile/layer.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var data = [{
        url: "./img/img_1.png",
        name: "22"
    }, {
        url: "./img/img_2.png",
        name: "33"
    }]; //data数据

    for (let i = 0; i < data.length; i++) {
        var el = $(`<div><img  src="${data[i].url}"/>${data[i].name}</div>`);
        el.appendTo($('#box'));
        console.log(i,"999")
        $("#box").children().eq(i).on("click",function(){
            console.log(i,"00")
            layer.open({
                type: 1,
                area: ['600px', '360px'],
                shadeClose: true, //点击遮罩关闭
                content:`<img  src="${data[i].url}"/>`
            });
        })
        // //捕获页
        // $().on('click', function () {
        //     layer.open({
        //         type: 1,
        //         area: ['600px', '360px'],
        //         shadeClose: true, //点击遮罩关闭
        //         content:el
        //     });
        // });
    }
    
    

</script>

</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 rt-thread线程切换的问题
  • ¥20 python忆阻器数字识别
  • ¥15 无法输出helloworld
  • ¥15 高通uboot 打印ubi init err 22
  • ¥20 PDF元数据中的XMP媒体管理属性
  • ¥15 R语言中lasso回归报错
  • ¥15 网站突然不能访问了，上午还好好的
  • ¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
  • ¥15 semrush,SEO,内嵌网站，api
  • ¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊