用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'">×</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