生活随笔
收集整理的這篇文章主要介紹了
html漫画简易查看器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
html漫畫簡易查看器
- 點擊圖片左邊往左翻頁，點擊圖片右邊往右翻頁
- 對超長圖（韓漫）的優(yōu)化
<!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">現(xiàn)在是第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">現(xiàn)在是第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 = "現(xiàn)在是第 "+p+" 頁";document.getElementById("recP").innerHTML=pageInfo;document.getElementById("recP2").innerHTML=pageInfo;toPage(p);}function changePage2() {var p = document.getElementsByName("page2")[0].value;var pageInfo = "現(xiàn)在是第 "+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 = "現(xiàn)在是第 "+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 = "現(xiàn)在是第 "+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").heightvar picWidth = document.getElementById("img").widthpicWidth = 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 = 1000picHight = picHight+100;if(picHight>=1500)return;}picHight = picHight.toString()+"px";document.getElementById("imgAlts").style.height=picHightdocument.getElementById("img").style.height=picHight}function smallerP() {var picHight = document.getElementById("img").heightvar picWidth = document.getElementById("img").widthpicWidth = 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 = 1000picHight = picHight - 100;if (picHight <= 500) return;}picHight = picHight.toString()+"px";document.getElementById("imgAlts").style.height=picHightdocument.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>
總結
以上是生活随笔為你收集整理的html漫画简易查看器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。
