Jquery动态添加img标签

 
<!-- 截屏图片 -->
<div class="screenShot" style="display: none;">
   <div class="ItemImgBox">
     <div class="screenShot_iconClose" onclick="shotImgClick()">X</div>
        <img class="screenShot_img" alt="截图图片">
   </div>
</div>
使用$(".screenShot img").attr("src", res)
或$(".screenShot").append('<img src='+res+'>')可将服务端返回的base64图片添加到img上


JQuery动态添加标签方法
一、向该节点内部后方添加:
1  $(".screenShot").append("<img src=''/>");
2  $("<img src=''/>").appendTo(".screenShot");
二、向该节点内部前方添加:
1  $(".screenShot").prepend("<img src=''/>");
2  $("<img src=''/>").prependTo(".screenShot");
三、向该节点同级后方添加:
1  $(".screenShot").after("<img src=''/>");
2  $("<img src=''/>").insertAfter(".screenShot");
四、向该节点同级前方添加:
1  $(".screenShot").before("<img src=''/>");
2  $("<img src=''/>").insertBefore(".screenShot");
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
需要使用JavaScript来实现这个功能,可以使用第三方库如jQuery或者自己编写代码。 以下是一个实现的示例代码: ```html <!DOCTYPE html> <html> <head> <title>图片预览</title> <style> /* 遮罩层样式 */ .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; z-index: 999; } /* 图片预览框样式 */ .preview { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; z-index: 1000; } .preview img { max-width: 100%; max-height: 100%; } </style> </head> <body> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <div class="mask"> <div class="preview"> <img src=""> </div> </div> <script> // 获取所有img标签 var imgs = document.getElementsByTagName('img'); // 给每个img标签添加点击事件 for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { // 显示遮罩层 document.querySelector('.mask').style.display = 'block'; // 显示预览图片 var previewImg = document.querySelector('.preview img'); previewImg.src = this.src; previewImg.onload = function() { // 计算预览框的位置 var preview = document.querySelector('.preview'); preview.style.marginLeft = -preview.offsetWidth / 2 + 'px'; preview.style.marginTop = -preview.offsetHeight / 2 + 'px'; }; }; } // 点击遮罩层或者预览框,关闭预览 document.querySelector('.mask').onclick = function() { this.style.display = 'none'; }; document.querySelector('.preview').onclick = function(e) { e.stopPropagation(); }; </script> </body> </html> ``` 这段代码会为所有img标签添加点击事件,当点击图片时会显示一个遮罩层和一个预览框,预览框中显示点击的图片。点击遮罩层或者预览框,会关闭预览。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值