<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>迷路的斑鸠</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
h1 {
color: white;
margin-bottom: 20px;
text-align: center;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
font-size: 2.5rem;
}
.comic-container {
width: 90%;
max-width: 1200px;
height: 70vh;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
padding: 20px;
}
#comic-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.control-panel {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 20px 40px;
border-radius: 50px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
button {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 25px;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #764ba2, #667eea);
}
button:active {
transform: translateY(1px);
}
#page-select {
padding: 10px 20px;
font-size: 16px;
border: 2px solid #667eea;
border-radius: 25px;
background: white;
color: #333;
outline: none;
cursor: pointer;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#page-select:focus {
border-color: #764ba2;
box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3);
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.comic-container {
height: 60vh;
padding: 10px;
}
.control-panel {
flex-direction: column;
border-radius: 20px;
padding: 20px;
}
button {
padding: 10px 20px;
font-size: 14px;
}
#page-select {
padding: 8px 15px;
font-size: 14px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.5rem;
}
.comic-container {
height: 50vh;
width: 95%;
}
.control-panel {
gap: 10px;
padding: 15px;
}
}
/* 针对720*1280px屏幕的特殊处理 */
@media (min-width: 720px) and (max-width: 768px){
.control-panel {
flex-direction: row !important;
}
body {
padding: 15px;
}
h1 {
font-size: 2rem;
margin-bottom: 15px;
}
.comic-container {
height: 65vh;
}
}
</style>
</head>
<body>
<h1>迷路的斑鸠</h1>
<div class="comic-container">
<img id="comic-img" src="" alt="漫画页面">
</div>
<div class="control-panel">
<button onclick="page_up()">上一页</button>
<select id="page-select"></select>
<button onclick="page_down()">下一页</button>
</div>
<script>
// url数组
const comic_images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg"];
var current_page_index = 0;
const total_pages = comic_images.length;
const comicImag = document.getElementById("comic-img");
const pageSelect = document.getElementById("page-select");
pageSelect.addEventListener("change", function()
{
current_page_index = pageSelect.value;
update_comic_page();
});
function page_up()
{
if(current_page_index > 0)
{
current_page_index--;
update_comic_page();
}
}
function page_down()
{
if(current_page_index < total_pages - 1)
{
current_page_index++;
update_comic_page();
}
}
function update_comic_page()
{
comicImag.src = comic_images[current_page_index];
pageSelect.value = current_page_index;
}
function init_page_select()
{
pageSelect.innerHTML = "";
for(let i = 0; i < total_pages; i++)
{
const option = document.createElement("option");
option.value = i;
option.text = i + 1;
pageSelect.appendChild(option);
}
}
if(total_pages > 0)
{
init_page_select();
update_comic_page();
}
</script>
</body>
</html>
浙公网安备 33010602011771号