图片弹框
用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:none; position: fixed;z-index: 1;padding-top:100px;left:0;top: 0;width:100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.9);}/* 圖片*/.modal-content{margin: auto;display: block;width:80%;max-width: 700px;}/* 文本內容*/#text{margin: auto;display: block;width:80%;max-width: 700px;text-align:center;color:#ccc;padding:10px 0;height: 150px;}.modal-content, #text { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom;animation-duration: 0.6s;}@-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)}}@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}/* 關閉按鈕 */.close {position: absolute;top: 15px;right: 35px;color: #f1f1f1;font-size: 40px;font-weight: bold;transition: 0.3s;}.close:hover,.close:focus {color: #bbb;text-decoration: none;cursor: pointer;}@media only screen and (max-width: 700px){.modal-content {width: 100%;}}js內容
var modal = document.getElementById('myModal');var img = document.getElementById('myImg');var modalImg = document.getElementById("img");var captionText = document.getElementById("text");img.onclick = function(){modal.style.display = "block";modalImg.src = this.src;captionText.innerHTML = this.alt;}var span = document.getElementsByClassName("close")[0];span.onclick = function() { modal.style.display = "none";}了解更多關注我喲！！！
總結
- 上一篇： 从RedisTemplate中获得Jed
- 下一篇： C语言程序解析