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