html漫画简易查看器
- 点击图片左边往左翻页,点击图片右边往右翻页
- 对超长图(韩漫)的优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.mid{
text-align: center;
margin: 0 auto;
}
.left{
float: left; width: 50%; height: 100%;
}
.right{
float: right; width: 50%; height: 100%;
}
.up{
width: 100%;
height: 846px;
position: absolute;
z-index:999;
}
#img{
height: 846px; width: auto;
max-height: 1500px;
min-height: 500px;
border-radius: 5px;
border-style:solid;
border-width:1px;
border-color: cadetblue;
}
#comicName{
border-radius: 20px;
border-style:solid;
border-width:10px;
margin: 30px;
border-color: cadetblue;
font-family:Arial,Helvetica,sans-serif;
font-size:50px;
color: lightcoral;
}
.diver01{
border-radius: 10px;
border-style:solid;
border-width:5px;
margin: 30px;
border-color: cadetblue;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
color: lightcoral;
}
.btn01{
width:100px;height:40px;
font-size: large;
}
.btn02{
width:300px;height:40px;
font-size: large;
}
</style>
</head>
<body style="background-color: cornsilk">
<div id="comicInfo" class="mid">
<p id="comicName"> 世界末日与黎明前 </p>
<p id="comicAuth" class="diver01">BY:浅野一二O</p>
在线阅读-----OFFERING HIGH QUALITY {#[ INIO ASANO`S ]#} ONLINE MANGA
</div>
<div class="mid">
<form>
<table class="mid">
<tr>
<td>
页码:<input name="page" type="text" value="1">
</td>
<td>
<input type="button" name="goToPage" value="go" onclick="changePage()" class="btn01">
</td>
</tr>
<tr>
<td>
<input type="button" name="prevPage" value="上一页" onclick="prevP()" class="btn01">
<input type="button" name="nextPage" value="下一页" onclick="nextP()" class="btn01">
</td>
<td>
<input type="button" name="biggerPage" value="放大" onclick="biggerP()" class="btn01">
<input type="button" name="smallPage" value="缩小" onclick="smallerP()" class="btn01">
</td>
</tr>
</table>
</form>
<div id="recP">
现在是第1页
</div>
</div>
<div id="pageContainer" class="mid" >
<div class="up" id="imgAlts">
<a class="left" onclick="prevP()"></a>
<a class="right" onclick="nextP()"></a>
</div>
<img id="img" src="comics\sjmrylmq\1.jpg">
</div>
<div class="mid">
<form>
<table class="mid">
<tr>
<td>
页码:<input name="page2" type="text" value="1">
</td>
<td>
<input type="button" name="goToPage2" value="go" onclick="changePage2()" class="btn01">
</td>
</tr>
<tr>
<td>
<input type="button" name="prevPage" value="上一页" onclick="prevP()" class="btn01">
<input type="button" name="nextPage" value="下一页" onclick="nextP()" class="btn01">
</td>
<td>
<input type="button" name="biggerPage" value="放大" onclick="biggerP()" class="btn01">
<input type="button" name="smallPage" value="缩小" onclick="smallerP()" class="btn01">
</td>
</tr>
</table>
</form>
<div id="recP2">
现在是第1页
</div>
</div>
<div class="diver01 mid">
<p>
延伸阅读
</p>
<input type="button" name="dmhdrs1" value="多美好的人生01" onclick="changeTOdmhdrs1()" class="btn02">
<input type="button" name="dmhdrs2" value="多美好的人生02" onclick="changeTOdmhdrs2()" class="btn02">
<input type="button" name="sjmrylmq" value="世界末日与黎明前" onclick="changeTOsjmrylmq()" class="btn02">
</div>
<script type="text/javascript">
readComics()
function changePage() {
var p = document.getElementsByName("page")[0].value;
var pageInfo = "现在是第 "+p+" 页";
document.getElementById("recP").innerHTML=pageInfo;
document.getElementById("recP2").innerHTML=pageInfo;
toPage(p);
}
function changePage2() {
var p = document.getElementsByName("page2")[0].value;
var pageInfo = "现在是第 "+p+" 页";
document.getElementById("recP").innerHTML=pageInfo;
document.getElementById("recP2").innerHTML=pageInfo;
toPage(p);
}
function toPage(p) {
var oSrc = document.getElementById("img").src;
document.getElementById("img").src = oSrc.replace(/\d+.jpg/, p+".jpg");
}
function prevP() {
var oSrc = document.getElementById("img").src;
var p = oSrc.match(/(\d+).jpg/)[1];
p = parseInt(p);
if(p <= 1){
return;
}else {
p = p - 1;
p = p.toString();
var pageInfo = "现在是第 "+p+" 页";
document.getElementById("recP").innerHTML=pageInfo;
document.getElementById("recP2").innerHTML=pageInfo;
document.getElementById("img").src = oSrc.replace(/\d+.jpg/, p + ".jpg");
}
}
function nextP() {
var oSrc = document.getElementById("img").src;
var p = oSrc.match(/(\d+).jpg/)[1];
p = parseInt(p);
p = p + 1;
p = p.toString();
var pageInfo = "现在是第 "+p+" 页";
document.getElementById("recP").innerHTML=pageInfo;
document.getElementById("recP2").innerHTML=pageInfo;
document.getElementById("img").src = oSrc.replace(/\d+.jpg/, p + ".jpg");
}
function biggerP(){
var picHight = document.getElementById("img").height
var picWidth = document.getElementById("img").width
picWidth = parseInt(picWidth);
picHight = parseInt(picHight);
if(picHight/picWidth>2){
document.getElementById("img").style.maxHeight="30000px";
picHight += 500;
}else{
document.getElementById("img").style.maxHeight="1500px";
if(picHight>1500)picHight = 1000
picHight = picHight+100;
if(picHight>=1500)return;
}
picHight = picHight.toString()+"px";
document.getElementById("imgAlts").style.height=picHight
document.getElementById("img").style.height=picHight
}
function smallerP() {
var picHight = document.getElementById("img").height
var picWidth = document.getElementById("img").width
picWidth = parseInt(picWidth);
picHight = parseInt(picHight);
if(picHight/picWidth>2){
document.getElementById("img").style.maxHeight="30000px";
picHight -= 500;
}else {
document.getElementById("img").style.maxHeight="1500px";
if(picHight>1500)picHight = 1000
picHight = picHight - 100;
if (picHight <= 500) return;
}
picHight = picHight.toString()+"px";
document.getElementById("imgAlts").style.height=picHight
document.getElementById("img").style.height=picHight
}
function changeTOdmhdrs1() {
var oSrc = document.getElementById("img").src;
var name = oSrc.split('\/');
name = name[name.length-2];
document.getElementById("comicName").innerHTML="多美好的人生1";
document.getElementById("img").src=oSrc.replace(name, "dmhdrs1").replace(/\d+.jpg/,"1.jpg");
}
function changeTOdmhdrs2() {
var oSrc = document.getElementById("img").src;
var name = oSrc.split('\/');
name = name[name.length-2];
document.getElementById("comicName").innerHTML="多美好的人生2";
document.getElementById("img").src=oSrc.replace(name, "dmhdrs2").replace(/\d+.jpg/,"1.jpg");
}
function changeTOsjmrylmq() {
var oSrc = document.getElementById("img").src;
var name = oSrc.split('\/');
name = name[name.length-2];
document.getElementById("comicName").innerHTML="世界末日与黎明前";
document.getElementById("img").src=oSrc.replace(name, "sjmrylmq").replace(/\d+.jpg/,"1.jpg");
}
</script>
</body>
</html>