- ID scansione:
- 959894e4-cd3c-4a3c-8931-0030202f6791Fatto
- URL inviato:
- https://www.892333.xyz/
- Report terminato:
Link · 0 trovati
I link in uscita identificati dalla pagina
Variabili JavaScript · 3 trovate
Le variabili JavaScript globali caricate sull'oggetto finestra di una pagina sono variabili dichiarate all'esterno delle funzioni e accessibili da qualsiasi punto del codice nell'ambito corrente
| Nome | Tipo |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
Messaggi di log della console · 0 trovati
Messaggi registrati nella console Web
HTML
Il corpo HTML non elaborato della pagina
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>2333 Image Shuffle</title>
<style>
#gallery {
column-count: 2;
column-gap: 20px;
}
.image-container {
width: 100%;
break-inside: avoid;
}
.image-container img {
width: 100%;
height: auto;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
}
.modal img {
max-width: 90%;
max-height: 90%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-modal {
position: absolute;
top: 20px;
right: 20px; font-size: 30px;
color: white;
background: none;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gallery"><div class="image-container">
<img src="static/3.png" alt="Image 3" data-modal-target="#modal-3">
</div><div class="image-container">
<img src="static/8.png" alt="Image 8" data-modal-target="#modal-8">
</div><div class="image-container">
<img src="static/17.png" alt="Image 17" data-modal-target="#modal-17">
</div><div class="image-container">
<img src="static/11.png" alt="Image 11" data-modal-target="#modal-11">
</div><div class="image-container">
<img src="static/10.png" alt="Image 10" data-modal-target="#modal-10">
</div><div class="image-container">
<img src="static/13.png" alt="Image 13" data-modal-target="#modal-13">
</div><div class="image-container">
<img src="static/12.png" alt="Image 12" data-modal-target="#modal-12">
</div><div class="image-container">
<img src="static/4.png" alt="Image 4" data-modal-target="#modal-4">
</div><div class="image-container">
<img src="static/0.png" alt="Image 0" data-modal-target="#modal-0">
</div><div class="image-container">
<img src="static/16.png" alt="Image 16" data-modal-target="#modal-16">
</div><div class="image-container">
<img src="static/5.png" alt="Image 5" data-modal-target="#modal-5">
</div><div class="image-container">
<img src="static/18.png" alt="Image 18" data-modal-target="#modal-18">
</div><div class="image-container">
<img src="static/14.png" alt="Image 14" data-modal-target="#modal-14">
</div><div class="image-container">
<img src="static/20.png" alt="Image 20" data-modal-target="#modal-20">
</div><div class="image-container">
<img src="static/1.png" alt="Image 1" data-modal-target="#modal-1">
</div><div class="image-container">
<img src="static/6.png" alt="Image 6" data-modal-target="#modal-6">
</div><div class="image-container">
<img src="static/9.png" alt="Image 9" data-modal-target="#modal-9">
</div><div class="image-container">
<img src="static/7.png" alt="Image 7" data-modal-target="#modal-7">
</div><div class="image-container">
<img src="static/2.png" alt="Image 2" data-modal-target="#modal-2">
</div><div class="image-container">
<img src="static/15.png" alt="Image 15" data-modal-target="#modal-15">
</div><div class="image-container">
<img src="static/19.png" alt="Image 19" data-modal-target="#modal-19">
</div><div class="image-container">
<img src="static/21.png" alt="Image 21" data-modal-target="#modal-21">
</div></div>
<script>
// 生成图片数组并打乱顺序
let images = [];
for (let i = 0; i < 22; i++) {
images.push(i);
}
// 洗牌算法
for (let i = images.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[images[i], images[j]] = [images[j], images[i]];
}
// 生成图片HTML
let imgHTML = '';
images.forEach(function(img) {
imgHTML += `<div class="image-container">
<img src="static/${img}.png" alt="Image ${img}" data-modal-target="#modal-${img}">
</div>`;
});
// 插入到gallery容器
document.getElementById('gallery').innerHTML = imgHTML;
// 生成模态框HTML
let modalHTML = '';
images.forEach(function(img) {
modalHTML += `<div class="modal" id="modal-${img}">
<img src="static/${img}.png" alt="Image ${img}">
<button class="close-modal">×</button>
</div>`;
});
// 插入模态框到body末尾
document.body.innerHTML += modalHTML;
// 添加事件监听器
const modalTargets = document.querySelectorAll('[data-modal-target]');
const closeButtons = document.querySelectorAll('.close-modal');
modalTargets.forEach(target => {
target.addEventListener('click', function(e) {
e.preventDefault();
const modalId = this.getAttribute('data-modal-target');
const modal = document.querySelector(modalId);
modal.style.display = 'block';
});
});
closeButtons.forEach(button => {
button.addEventListener('click', function() {
this.closest('.modal').style.display = 'none';
});
});
// 点击模态框空白处关闭
document.addEventListener('click', function(e) {
if (e.target.classList.contains('modal')) {
e.target.style.display = 'none';
}
});
</script><div class="modal" id="modal-3">
<img src="static/3.png" alt="Image 3">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-8">
<img src="static/8.png" alt="Image 8">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-17">
<img src="static/17.png" alt="Image 17">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-11">
<img src="static/11.png" alt="Image 11">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-10">
<img src="static/10.png" alt="Image 10">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-13">
<img src="static/13.png" alt="Image 13">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-12">
<img src="static/12.png" alt="Image 12">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-4">
<img src="static/4.png" alt="Image 4">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-0">
<img src="static/0.png" alt="Image 0">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-16">
<img src="static/16.png" alt="Image 16">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-5">
<img src="static/5.png" alt="Image 5">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-18">
<img src="static/18.png" alt="Image 18">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-14">
<img src="static/14.png" alt="Image 14">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-20">
<img src="static/20.png" alt="Image 20">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-1">
<img src="static/1.png" alt="Image 1">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-6">
<img src="static/6.png" alt="Image 6">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-9">
<img src="static/9.png" alt="Image 9">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-7">
<img src="static/7.png" alt="Image 7">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-2">
<img src="static/2.png" alt="Image 2">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-15">
<img src="static/15.png" alt="Image 15">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-19">
<img src="static/19.png" alt="Image 19">
<button class="close-modal">×</button>
</div><div class="modal" id="modal-21">
<img src="static/21.png" alt="Image 21">
<button class="close-modal">×</button>
</div>
</body></html>