摘要:模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。
模態圖
代碼儲存在Github
效果預覽
初衷:很多人在初學前端的時候都會問,“如何入門前端?”
同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 “入門級” 的教材并不太滿意。學習一門新知識,實例是尤其重要的。在這里本人整理了目前頁面上常見功能實現的具體實例。愿能為大家提供一些幫助。
希望能夠與大家互相分享,共同進步。
效果預覽
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; /* 頭部加padding */ left: 0; top: 0; width: 100%; /* 全寬 */ height: 100%; /* 全高 */ overflow: auto; /* 允許超出滾屏 */ background-color: rgba(0,0,0,0.9); }
模態框內容樣式
/*模態框內容樣式*/ .modal-content { margin: 0 auto; /*居中*/ display: block; width: 80%; max-width: 700px; } /*加斷點,響應式改變寬度*/ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } #caption { margin: 0 auto; /*居中*/ display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /*加動效果*/ .modal-content, #caption { animation-name: zoom; animation-duration: 0.6s; } @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 { color: #bbb; text-decoration: none; cursor: pointer; }JavaScript 內容
離開全局
(function() {})();
創建模態圖對象
/*模態圖對象*/ var modalImg = {};
編寫模態圖對象
/*觸發圖片*/ modalImg.triggerImg = document.getElementsByClassName("myImg"); /*關閉按鈕*/ modalImg.closeBtn = document.getElementById("closeBtn"); /*模態背景*/ modalImg.modal = document.getElementById("myModal"); /*模態圖*/ modalImg.img = document.getElementById("img01"); /*模態圖標題*/ modalImg.captionText = document.getElementById("caption"); /*模態圖顯示*/ modalImg.show = function() { this.modal.style.display = "block"; this.img.src = this.triggerImg[0].src; this.captionText.innerText = this.triggerImg[0].alt; } /*模態圖關閉*/ modalImg.close = function() { this.modal.style.display = "none"; } /*點擊模態圖以外區域,模態圖關閉*/ modalImg.outsideClick = function() { var that = this; window.onclick = function(event) { if(event.target == that.modal) { that.close(); } } } /*初始化*/ modalImg.init = function() { var that = this; this.triggerImg[0].onclick = function() { that.show(); } this.closeBtn.onclick = function() { that.close(); } this.outsideClick(); }
調用
/*模態圖調用*/ modalImg.init();
好啦,現在所有的代碼都寫完啦!
趕快打開瀏覽器,看看效果吧!
在這里,只是給大家提供一種思路,參考。
具體的實現,每個人都可以有不同的方法。
請大家趕快發揮想象,把你最想實現的功能,在電腦敲出來吧!
代碼參考自w3cschools
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86924.html
摘要:模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態圖 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材并不...
摘要:模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態圖 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材并不...
摘要:模態相冊代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態相冊 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材...
摘要:模態相冊代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態相冊 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材...
摘要:模態相冊代碼儲存在效果預覽初衷很多人在初學前端的時候都會問,如何入門前端同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態相冊 代碼儲存在Github效果預覽 初衷:很多人在初學前端的時候都會問,如何入門前端?同為在前端學習道路上,奮力追趕的一員,本人對于目前網絡上所能看到的 入門級 的教材...
閱讀 2887·2021-11-15 11:39
閱讀 1513·2021-08-19 10:56
閱讀 1093·2019-08-30 14:12
閱讀 3730·2019-08-29 17:29
閱讀 719·2019-08-29 16:21
閱讀 3416·2019-08-26 12:22
閱讀 1515·2019-08-23 16:30
閱讀 1015·2019-08-23 15:25