要實現(xiàn)圖片點擊全屏預(yù)覽的功能，可以使用JavaScript和CSS來實現(xiàn)。以下是一個簡單的示例代碼：
html
<!DOCTYPE html>
<html>
<head>
<meta charsett="UTF-8">
<title>圖片點擊全屏預(yù)覽</title>
<style>
/* 全屏預(yù)覽樣式 */
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.fullscreen img {
max-width: 90%;
max-height: 90%;
}
.fullscreen img:hover {
cursor: pointer;
}
/* 關(guān)閉按鈕樣式 */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 24px;
cursor: pointer;
}
/* 下載按鈕樣式 */
.download-btn {
position: absolute;
bottom: 10px;
right: 10px;
color: #fff;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="image.jpg" alt="圖片" onclick="openFullscreen(this)">
<script>
function openFullscreen(img) {
// 創(chuàng)建全屏預(yù)覽容器
var fullscreenDiv = document.createElement("div");
fullscreenDiv.classList.add("fullscreen");
// 創(chuàng)建關(guān)閉按鈕
var closeBtn = document.createElement("span");
closeBtn.classList.add("close-btn");
closeBtn.innerHTML = "×";
closeBtn.onclick = function() {
closeFullscreen();
};
fullscreenDiv.appendChild(closeBtn);
// 創(chuàng)建下載按鈕
var downloadBtn = document.createElement("span");
downloadBtn.classList.add("download-btn");
downloadBtn.innerHTML = "↓";
downloadBtn.onclick = function() {
downloadImage(img.src);
};
fullscreenDiv.appendChild(downloadBtn);
// 創(chuàng)建圖片元素
var fullscreenImg = document.createElement("img");
fullscreenImg.src = img.src;
fullscreenDiv.appendChild(fullscreenImg);
// 添加全屏預(yù)覽容器到頁面
document.body.appendChild(fullscreenDiv);
// 禁用滾動
document.body.style.overflow = "hidden";
}
function closeFullscreen() {
// 移除全屏預(yù)覽容器
var fullscreenDiv = document.querySelector(".fullscreen");
fullscreenDiv.parentNode.removeChild(fullscreenDiv);
// 啟用滾動
document.body.style.overflow = "auto";
}
function downloadImage(src) {
// 創(chuàng)建一個隱藏的鏈接并設(shè)置下載屬性
var link = document.createElement("a");
link.href = src;
link.download = "image.jpg";
link.style.display = "none";
// 將鏈接添加到頁面并模擬點擊
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
在上面的代碼中，我們首先定義了一個全屏預(yù)覽的樣式，并在點擊圖片時調(diào)用openFullscreen函數(shù)。該函數(shù)會創(chuàng)建一個全屏預(yù)覽容器，并在容器中顯示圖片。同時，我們還創(chuàng)建了關(guān)閉按鈕和下載按鈕，分別用于關(guān)閉全屏預(yù)覽和下載圖片。
點擊關(guān)閉按鈕時，調(diào)用closeFullscreen函數(shù)，移除全屏預(yù)覽容器，并啟用滾動。
點擊下載按鈕時，調(diào)用downloadImage函數(shù)，創(chuàng)建一個隱藏的鏈接，并設(shè)置鏈接的下載屬性，然后模擬點擊鏈接實現(xiàn)圖片下載。文章來源：http://www.zghlxwxcb.cn/news/detail-618005.html
請注意，這只是一個簡單的示例，實際的圖片全屏預(yù)覽功能可能需要更多的優(yōu)化和處理，例如支持多張圖片預(yù)覽、滑動切換等。根據(jù)具體需求，您可以根據(jù)上述示例進行擴展和修改。文章來源地址http://www.zghlxwxcb.cn/news/detail-618005.html
到了這里，關(guān)于點擊圖片1.全屏閱覽2.下載3.關(guān)閉 純純html css js的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
