图片弹框

最新推荐文章于 2021-06-05 02:43:25 发布

风叶翩翩

最新推荐文章于 2021-06-05 02:43:25 发布

阅读量322

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45743799/article/details/104252348

版权

用js实现图片弹框的特效。效果展示代码展示html内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head><body> <img ...

摘要由CSDN通过智能技术生成

用js实现图片弹框的特效。

效果展示
在这里插入图片描述

代码展示

html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    </head>

<body>

    <img id="myImg" src="img/c_7.jpg" alt="文本内容" width="300" height="200">

<div class="modal" id="myModal">
    
    <span class="close" οnclick="document.getElementById('myModal').style.display='none'">&times;</span>
    
    <img class="modal-content" id="img">
        
        <div id="text"></div>
</div>
</body>

</html>

css内容

#myImg{
   
		        border-radius: 5px;
		        cursor:pointer;
		        transition:0.3s;
		    }
		    #myImg:hover{
   opacity:0.7;}
		    
		    .modal{
   
		        display:non

最低0.47元/天解锁文章

风叶翩翩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片弹框

用js实现图片弹框的特效。效果展示代码展示html内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head><body> <img ...
复制链接

扫一扫

专栏目录