<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>我的电子书</title>
<style>
body {
margin: 0;
font-family: 微软雅黑, sans-serif;
overflow: hidden; /* 防止页面出现滚动条 */
}
.box {
display: flex;
height: 100vh;
}
.left {
width: 140px; /* 缩窄左栏 */
overflow-y: auto;
background: #f5f5f5;
padding: 8px 6px; /* 减小内边距 */
font-size: 13px; /* 字体稍小，节省空间 */
}
.right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
overflow: hidden;
}
.item {
padding: 6px 8px;
cursor: pointer;
border-radius: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item:hover {
background: #e3f2fd;
}
.item.active {
background: #1976d2;
color: white;
}
/* 图片自适应：完整显示、保持比例 */
#show {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; /* 完整显示，不裁剪 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
<div class=”box”>
<div class=”left”>
<div class=”item active” data-src=”http://q5.itc.cn/images01/20260104/ee5c652b033d4df392ac4ca71a443a09.jpeg”>封面</div>
</div>
<div class=”right”>
<img id=”show” src=”http://q5.itc.cn/images01/20260104/ee5c652b033d4df392ac4ca71a443a09.jpeg”>
</div>
</div>
<script>
const items = document.querySelectorAll(‘.item’);
const showImg = document.getElementById(‘show’);
items.forEach(item => {
item.addEventListener(‘click’, function() {
items.forEach(i => i.classList.remove(‘active’));
this.classList.add(‘active’);
showImg.src = this.dataset.src;
});
});
</script>
</body>
</html>
<p>
<iframe src=”https://xeapp.cn/ebook/lkbwnjyyx.html ” frameborder=”0″ scrolling=”auto”></iframe>
</p>
<p style=”text-align: center; margin-top: 10px; color: rgb(102, 102, 102);”>
</p>