0
我想創建一個照片廚房，我已經添加了圖片列表和縮略圖圖片單擊我想顯示模糊背景並顯示在中心的大圖像。我能夠創建一個動態的div並顯示大圖片，但它總是在列表下方。 請找我在以下地址代碼：https://github.com/sanjana-1604/BirthDay-.git如何創建和顯示一個div
請檢查我的代碼，讓我知道該怎麼做才能正確DIV
A
回答
1
好吧，我下載了你的代碼和一個不得不看過去。雖然你應該共享一個片段。
我深深感謝您爲編程所做的努力。
function changeBackgroundColor(image, image_src, color) {
if (image === 'no') {
document.body.style.background = "red";
} else {
document.body.style.backgroundImage = "url('Img/bg.png')";
}
}
var imageCount = 01;
total = 20;
function slide(x) {
var image = document.getElementsByClassName('image');
imageCount = imageCount + x;
if (imageCount > total) {
imageCount = 01;
}
if (imageCount < 1) {
imageCount = total;
}
image.src = "Img/big_pics" + imageCount + ".jpg";
}
/////////////////////////////////////////////////////
/////////Code Written by me starts here//////////////
/////////////////////////////////////////////////////
window.addEventListener("load", function() { //The code inside this block must be executed only after the complete page is loaded,
var createBackgroundFader = function(imgNumber) {
var fader = document.createElement("div");
fader.classList.add("fader", "hidden");
fader.id = "bigImageViewer" + imgNumber;
fader.addEventListener("click", function(event) { //This block of code will enable you to click on the empty space of fader to hide it
if (event.target === this) {
this.classList.toggle("hidden");
}
});
return fader;
};
var createBigImageViewer = function(imgNumber) {
var img = document.createElement("img");
var fader = createBackgroundFader(imgNumber);
img.classList.add("bigImg");
img.src = "Img/big_pics/" + imgNumber + ".jpg";
fader.appendChild(img);
return fader;
};
var createListItem = function(imgNumber) { //In javascript you can create functions like this as well...
var li = document.createElement("li");
var img = document.createElement("img");
//Preparing img element
img.setAttribute("src", "Img/Thumbnail/" + imgNumber + ".jpg");
img.setAttribute("alt", "thumbnail image");
img.dataset.imgNumber = imgNumber;
img.classList.add("image", "thumbnail");
img.addEventListener("click", function() {
var bigImageViewer = document.getElementById("bigImageViewer" + this.dataset.imgNumber);
bigImageViewer.classList.toggle("hidden"); //Look up dictionary to know the meaning of toggle...
});
//Appending img element to li
li.appendChild(img);
//Lastly return li
return li;
};
var photoList = document.getElementById("photoList");
for (var i = 0; i < 20; i++) {
photoList.appendChild(createListItem(i + 1)); //Appending the freshly cooked li element to photoList
document.body.appendChild(createBigImageViewer(i + 1)); //Appending bigImageViewer to body but you can't see because they are hidden by default. Click on a thumbnail to view the BigImage
}
});
/////////////////////////////////////////////////////
///////////Code Written by me ends here//////////////
/////////////////////////////////////////////////////article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
font-size: 100%;
}
/*title "1 year june"*/
.title_h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 1.5em;
background: white;
width: auto;
text-align: center;
border-radius: 0.2em;
/*to make border rounded*/
display: inline;
position: absolute;
top: 5%;
left: 10%;
}
/* --------------------------------------------------------------------------------------------------- */
/*main menu */
.main_menu
/*main menu*/
{
list-style-type: none;
/* to avoid bullets in the list items */
display: inline;
position: absolute;
top: 5%;
left: 20%;
}
.main_menu li {
display: inline;
/* to display horizontally */
}
/* --------------------------------------------------------------------------------------------------------------*/
/* main white div */
.main_div
/*class to draw main div*/
{
position: absolute;
/*positioned relative to body*/
top: 18%;
left: 15%;
width: 65%;
background: white;
padding: 5px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#welcome_note {
border: 2px solid rgb(0, 0, 0);
border-radius: 0.2em;
width: 15em;
height: 16em;
background: white;
padding: 2px;
display: inline-block;
margin: 5px;
}
#welcome_note h3 {
text-align: center;
}
.mainpage_header {
height: 15em;
background: #ff8566;
position: relative;
/*positioned relative to main div*/
top: 20px;
left: 10px;
width: 80%;
}
#DP_img {
border: 2px solid black;
width: 10em;
height: 10em;
}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
/* PHOTO PAGE */
/* --------------------------------------------------------------------------------------------------------------*/
.Photo_main_div {
position: absolute;
/*positioned relative to body*/
top: 18%;
left: 15%;
width: 80%;
background: white;
padding: 5px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#photo_page_outline {
width: 90%;
margin-left: auto;
margin-right: auto;
border: 1px dashed black;
border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#photo_page_header {
width: 100%;
text-align: center;
background: rgb(251, 130, 184);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* --------------------------------------------------------------------------------------------------------------*/
#photo_page_footer {
width: 100%;
text-align: center;
background: rgb(251, 130, 184);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
clear: both;
}
/* --------------------------------------------------------------------------------------------------------------*/
#content {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------------------------------------------*/
#content ul {
list-style: none;
}
/* --------------------------------------------------------------------------------------------------------------*/
#content li {
width: 14em;
float: left;
}
#content img {
-webkit-webkit-transition: all 1s ease;
-moz-webkit-transition: all 1s ease;
-ms-webkit-transition: all 1s ease;
-o-webkit-transition: all 1s ease;
transition: all 1s ease;
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
border: 1px solid #000000;
}
#content img:hover {
-webkit-webkit-transition: all 1s ease;
-moz-webkit-transition: all 1s ease;
-ms-webkit-transition: all 1s ease;
-o-webkit-transition: all 1s ease;
transition: all 1s ease;
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
transform: translateZ(25px) rotate(3deg);
border: 1px solid #000000;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
/*/////////////////////////////////////////////////////
/////////Code Written by me starts here////////////////
/////////////////////////////////////////////////////*/
li .thumbnail {
height: 120px;
width: 200px;
}
.fader {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
text-align: center;
padding-top: 100px;
}
div .bigImg {
max-width: 70%;
max-height: 70%;
border: solid white 8px;
box-sizing: border-box;
box-shadow: 10px 30px 50px 0px;
}
.hidden {
visibility: hidden;
}
/*/////////////////////////////////////////////////////
///////////Code Written by me ends here////////////////
/////////////////////////////////////////////////////*/<!-- No Changes were made in this file except commenting all li elements.
li elements can easily be added to the ul through javascript from inside a loop
Kindly see from line number 80 in javascript to understand the logic.
-->
<!DOCTYPE html>
<html>
<head>
<script src="myJavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="myCSS.css">
</head>
<body onload="changeBackgroundColor('yes')">
<h1 class="title_h1">
1 year June
</h1>
<ul class="main_menu">
<li><a href="Photos.html">Photos</a>
</li>
<li>Stroy</li>
</ul>
<div class=" Photo_main_div">
<div id="photo_page_outline">
<div id="content">
<header id="photo_page_header">
PHOTOS
</header>
<ul id="photoList">
<!-- <li onclick="slide(1)"><img src="Img/Thumbnail/1.jpg" width="200" height = "120" alt="thumbnail image" class = "image"></li>
<li><img src="Img\Thumbnail\2.jpg" width="200" height = "120" alt="thumbnail image" onClick="slide(2)" class = "image"></li>
<li><img src="Img\Thumbnail\3.jpg" width="200" height = "120" alt="thumbnail image" onclick="slide(3)"></li>
<li><img src="Img\Thumbnail\4.jpg" width="200" height = "120" alt="thumbnail image" onclick="slide(4)"></li>
<li><img src="Img\Thumbnail\5.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\6.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\7.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\8.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\9.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\10.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\11.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\12.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\13.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\14.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\15.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\16.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\17.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\18.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\19.jpg" width="200" height = "120" alt="thumbnail image"></li>
<li><img src="Img\Thumbnail\20.jpg" width="200" height = "120" alt="thumbnail image"></li>-->
</ul>
<footer id="photo_page_footer">
My Album
</footer>
</div>
</div>
</div>
</body>
</html>或者你可以從這個鏈接https://www.dropbox.com/s/eqqktw9y8u97zsf/BirthDay--master.zip?dl=1
我希望這將解決您的問題下載解決了項目。
注：在您big_pics文件夾，請從01.JPG通過09.jpg通過9.jpg更改文件名1.JPG
參考：瞭解在MDN（Mozilla開發者網絡）以下 到更瞭解你的問題是如何解決的？
- 的 '這個' 關鍵字
- 面向對象的JavaScript
- DOM
- 的
+0
感謝PRATIK，您的解決方案的工作原理完全我希望我的代碼的方法上班。你能否讓我知道我的代碼中的確切問題。我正在嘗試調整div的z-index，但是它並沒有正確完成。 –
+0
代碼問題： –
+0
代碼問題： 1.沒有元素的ID爲「image」。 2.如果您想顯示大圖片，將所有內容都放在後面，那麼您必須每次點擊縮略圖時切換大圖片瀏覽器的可見性。 我創建了一個「.hidden」類來隱藏一個元素。我在推子元素（這也是大圖像查看器的容器元素）上切換這個類。所以當你點擊一個縮略圖時，它將在推子上切換「.hidden」類，並且我還編程了當你點擊大圖像查看器之外的任何地方時，「.hidden」類再次在推子元素上切換。 –
相關問題
- 1. 如何創建一個Nagios顯示器
- 2. 顯示一個div和側
- 3. 如何創建一個組合CheckedListBox和詳細ListView的顯示？
- 4. 一個接一個地顯示div，另一個顯示div
- 5. 如何中心，顯示inline-block的一個div顯示錶一個div下？
- 6. jquery顯示一個div div
- 7. 如何另一個DIV後顯示一個DIV，不得重複
- 8. 如何在另一個div內創建一個固定div？
- 9. jQuery如何顯示下一個div
- 10. 如何隱藏或顯示一個div
- 11. 如何強制顯示一個div
- 12. 如何顯示全圖像一個div
- 13. 如何用dojo創建一個div？
- 14. 如何創建一個類來顯示一個UIWindow？
- 15. 如何創建一個顯示一個SQL查詢
- 16. 如何構建一個顯示body的.scrollTop值的div？
- 17. 如何創建，顯示每
- 18. 如何創建一個彈出窗口，顯示一般信息
- 19. 如何在多個顯示器上創建一個任務欄？
- 20. 如何創建一個顯示多個酒店鏈接的XML？
- 21. 如何創建一個菜單項以顯示多個模塊
- 22. 如何顯示在Python中創建和顯示在HTML？
- 23. 如果另一個div未顯示，如何使div出現？
- 24. 動態創建的div不會顯示
- 25. 如何在點擊另一個div後在另一個div上顯示div？
- 26. 如何創建一個固定的底部的div和包裝
- 27. 如何從一個div顯示一整行到另一個
- 28. 如何重複顯示兩個div一個一個
- 29. 隱藏/顯示一個DIV
- 30. 顯示一個DIV元件
，而不是在你的git的共享代碼，請重現該問題在撥弄左右，並與我們分享小提琴的鏈接.. – Lal