存在两个问题:一是放大的图片如何在该界面存在多张,二是点击图片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后的因变量没有被发现识别啊