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">&nbsp;世界末日与黎明前&nbsp;</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;//alert(p)var pageInfo = "现在是第 "+p+" 页";document.getElementById("recP").innerHTML=pageInfo;document.getElementById("recP2").innerHTML=pageInfo;toPage(p);}function changePage2() {var p = document.getElementsByName("page2")[0].value;//alert(p)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];//alert(p)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;//alert(p)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];//alert(p)p = parseInt(p);p = p + 1;p = p.toString();var pageInfo = "现在是第 "+p+" 页";document.getElementById("recP").innerHTML=pageInfo;document.getElementById("recP2").innerHTML=pageInfo;//alert(p)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 = 1000//alert(picHight)picHight = picHight+100;if(picHight>=1500)return;}picHight = picHight.toString()+"px";document.getElementById("imgAlts").style.height=picHightdocument.getElementById("img").style.height=picHight//alert(picWidth)}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//alert(picHight)}function changeTOdmhdrs1() {var oSrc = document.getElementById("img").src;var name = oSrc.split('\/');name = name[name.length-2];//alert(oSrc.replace(name, "dmhdrs1").replace(/\d+.jpg/,"1.jpg"));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];//alert(oSrc.replace(name, "dmhdrs1").replace(/\d+.jpg/,"1.jpg"));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];//alert(oSrc.replace(name, "dmhdrs1").replace(/\d+.jpg/,"1.jpg"));document.getElementById("comicName").innerHTML="世界末日与黎明前";document.getElementById("img").src=oSrc.replace(name, "sjmrylmq").replace(/\d+.jpg/,"1.jpg");}</script>
</body>
</html>

html漫画简易查看器相关推荐

[原]简易Windows密码查看器
[标题]:简易Windows密码查看器 [时间]:2009-10-09 [摘要]:通过全局钩子获取当前鼠标处的窗口控件句柄,然后直接调用GetWindowText()获取密码文本. [关键字]:密码. ...
简易Windows密码查看器
[标题]:简易Windows密码查看器 [时间]:2009-10-09 [摘要]:通过全局钩子获取当前鼠标处的窗口控件句柄,然后直接调用GetWindowText()获取密码文本. [关键字]:密码. ...
Android简易图片管理器,一个简单仿微信朋友圈的图片查看器 PhotoViewer
PhotoViewer 该图片查看器是模仿微信朋友圈查看图片编写 allprojects { repositories { ... maven { url 'https://jitpack.io' } ...
基于STM32的照片查看器课程报告
注:资料借鉴正点原子正点精英板STM32F1开发指南(库函数版):程序是正点精英板STM32F1实验四十三章图片显示实验. 程序地址:实验38图片显示实验.7z-嵌入式文档类资源-CSDN下载目录 ...
win10照片查看器_Win10小技巧，帮你事半功倍
win10已经发布4年了,还有很多小技巧你知道吗?今天分享给大家15个非常好用的Win10小技巧,学会之后让你娱乐办公都事半功倍. 1.卓越性能模式 Win10内部包含多种电源模式,比如"高 ...
win10照片查看器_非常好用的19个Win10小技巧，学会之后事半功倍
1.卓越性能模式 Win10内部包含多种电源模式,比如"高性能"模式,可以最大程度榨干系统的潜能.但除了这个"高性能"以外,Win10还有一种级别更高的电源模式 ...
win10照片查看器_19个Win10使用小技巧，看看你知道哪些？
从Windows10发布之日算起,它已经问世7个年头了.虽然这几年,它出现了各种小bug,但依然不妨碍它是一款好用的系统.毕竟是9102年了,你想用老系统也回不去了. 与其抗拒,不如敞开胸怀接受.今天 ...
强大的图像查看器：EdgeView mac中文
EdgeView mac中文版是mac上一款强大的图像查看软件,可以处理一些最流行的图像文件格式,同时还提供对导航杂志或漫画书的支持.EdgeView能够打开著名的图像文件格式主要包括JPG,GIF, ...
EdgeView 2 for Mac(图像查看器)
EdgeView 2 是一款图像查看器软件,支持多点触控触控板,您可以使用捏合和缩小手势进行放大和缩小,并使用滑动手势在图像之间滑动,它还会将图像预加载到图像缓存中并快速呈现. 官方介绍 EdgeVi ...

html漫画简易查看器

html漫画简易查看器

html漫画简易查看器相关推荐

最新文章

热门文章