摘要:模態(tài)圖代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。
模態(tài)圖
代碼儲(chǔ)存在Github
效果預(yù)覽
初衷:很多人在初學(xué)前端的時(shí)候都會(huì)問,“如何入門前端?”
同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 “入門級(jí)” 的教材并不太滿意。學(xué)習(xí)一門新知識(shí),實(shí)例是尤其重要的。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。愿能為大家提供一些幫助。
希望能夠與大家互相分享,共同進(jìn)步。
效果預(yù)覽
×
CSS 部分
觸發(fā)圖片樣式
/*觸發(fā)圖片樣式*/
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}
模態(tài)框樣式
/*模態(tài)框樣式*/
.modal {
display: none; /* 默認(rèn)隱藏 */
position: fixed; /* 相對(duì)瀏覽器定位 */
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);
}
模態(tài)框內(nèi)容樣式
/*模態(tài)框內(nèi)容樣式*/
.modal-content {
margin: 0 auto; /*居中*/
display: block;
width: 80%;
max-width: 700px;
}
/*加斷點(diǎn),響應(yīng)式改變寬度*/
@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;
}
/*加動(dòng)效果*/
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/*關(guān)閉按鈕樣式*/
.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 內(nèi)容
離開全局
(function() {})();
創(chuàng)建模態(tài)圖對(duì)象
/*模態(tài)圖對(duì)象*/
var modalImg = {};
編寫模態(tài)圖對(duì)象
/*觸發(fā)圖片*/
modalImg.triggerImg = document.getElementsByClassName("myImg");
/*關(guān)閉按鈕*/
modalImg.closeBtn = document.getElementById("closeBtn");
/*模態(tài)背景*/
modalImg.modal = document.getElementById("myModal");
/*模態(tài)圖*/
modalImg.img = document.getElementById("img01");
/*模態(tài)圖標(biāo)題*/
modalImg.captionText = document.getElementById("caption");
/*模態(tài)圖顯示*/
modalImg.show = function() {
this.modal.style.display = "block";
this.img.src = this.triggerImg[0].src;
this.captionText.innerText = this.triggerImg[0].alt;
}
/*模態(tài)圖關(guān)閉*/
modalImg.close = function() {
this.modal.style.display = "none";
}
/*點(diǎn)擊模態(tài)圖以外區(qū)域,模態(tài)圖關(guān)閉*/
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();
}
調(diào)用
/*模態(tài)圖調(diào)用*/
modalImg.init();
好啦,現(xiàn)在所有的代碼都寫完啦!
趕快打開瀏覽器,看看效果吧!
在這里,只是給大家提供一種思路,參考。
具體的實(shí)現(xiàn),每個(gè)人都可以有不同的方法。
請(qǐng)大家趕快發(fā)揮想象,把你最想實(shí)現(xiàn)的功能,在電腦敲出來(lái)吧!
代碼參考自w3cschools
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/86924.html
摘要:模態(tài)圖代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 模態(tài)圖 代碼儲(chǔ)存在Github效果預(yù)覽 初衷:很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端?同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的教材并不...
摘要:模態(tài)圖代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 模態(tài)圖 代碼儲(chǔ)存在Github效果預(yù)覽 初衷:很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端?同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的教材并不...
摘要:模態(tài)相冊(cè)代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 模態(tài)相冊(cè) 代碼儲(chǔ)存在Github效果預(yù)覽 初衷:很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端?同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的教材...
摘要:模態(tài)相冊(cè)代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 模態(tài)相冊(cè) 代碼儲(chǔ)存在Github效果預(yù)覽 初衷:很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端?同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的教材...
摘要:模態(tài)相冊(cè)代碼儲(chǔ)存在效果預(yù)覽初衷很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的入門級(jí)的教材并不太滿意。在這里本人整理了目前頁(yè)面上常見功能實(shí)現(xiàn)的具體實(shí)例。 模態(tài)相冊(cè) 代碼儲(chǔ)存在Github效果預(yù)覽 初衷:很多人在初學(xué)前端的時(shí)候都會(huì)問,如何入門前端?同為在前端學(xué)習(xí)道路上,奮力追趕的一員,本人對(duì)于目前網(wǎng)絡(luò)上所能看到的 入門級(jí) 的教材...
閱讀 2907·2021-11-15 11:39
閱讀 1528·2021-08-19 10:56
閱讀 1100·2019-08-30 14:12
閱讀 3748·2019-08-29 17:29
閱讀 725·2019-08-29 16:21
閱讀 3428·2019-08-26 12:22
閱讀 1522·2019-08-23 16:30
閱讀 1029·2019-08-23 15:25