html漫画简易查看器

最新推荐文章于 2021-09-25 17:09:14 发布
最新推荐文章于 2021-09-25 17:09:14 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： html 文章标签： html js css 图片查看
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lafea/article/details/110917436
版权

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").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
                //alert(picHight)
                picHight = picHight+100;
                if(picHight>=1500)return;
            }

            picHight = picHight.toString()+"px";
            document.getElementById("imgAlts").style.height=picHight
            document.getElementById("img").style.height=picHight
            //alert(picWidth)
        }

        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
            //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>
你哥同学
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现图片浏览器,实现图片浏览器功能
weixin_29428137的博客
06-09 1535
////ViewController.m//ScrollViewShowImage////Created by YouXianMing on 14-9-24.//Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "ViewController.h"#import "NSObject+WeakRelated.h"typede...
HTML5-Comic-Book-Reader:基于浏览器的漫画阅读器。 提供轻松的导航和图像增强
05-20
漫画书阅读器 基于画布的Web应用程序，用于阅读漫画。 您还可以在以下看到作为离线Chrome打包应用程序CBZ / CBR漫画书阅读器的实现： : 。 用法 请参阅随附的示例。 开发安装 构建需要nodejs和npm。 安装已通过nodejs 0.10.0进行了测试，较旧的版本可能会或可能无法正常工作。 npm install make make test 版权和许可 版权所有2010 Bala Clark 根据Apache许可证2.0版（“许可证”）获得许可； 除非遵守许可，否则您不得使用本作品。 您可以在LICENSE文件中或以下位置获得许可证的副本： 除非适用法律要求或以书面形式同意，否则根据“许可”分发的软件将按“原样”分发，没有任何形式的明示或暗示担保或条件。 有关许可下特定的语言管理权限和限制，请参见许可。
利用html5读取本地文本文件及图片文件
热门推荐
cnds123的专栏
09-25 1万+
利用html5可以对本地的如文本、图片等文件读取操作，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg，关于MIME 参考手册 参见https://www.w3school.com.cn/media/media_mimeref.asp）。
html制作照片查看器,jQuery基于窗口的照片查看器插件
weixin_39665762的博客
06-28 369
photoviewer.js是一款基于窗口的照片查看器jQuery插件。该插件可以对一组图片生成预览，并将图片放置在一个窗口中，该窗口可以自由拖动，缩放，里面的图片可以缩放、旋转等。使用方法在页面中引入photoviewer.css、jquery和photoviewer.js文件。初始化插件使用photoviewer非常简单，通过下面的方法来初始化即可。// build images arrayv...
html手机端的图片阅读器,兼容移动端与电脑端的图片查看器viewer.js插件
weixin_31227315的博客
06-03 932
Viewer.js 有以下特点：支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保)支持缩略图支持标题显示支持多种自定义事件Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样，但代码不一样，不能通用。使用方法引入文件Javascript版:jQuery版:Html结构JavaSc...
terminal_markdown_viewer：样式化的终端Markdown查看器
02-03
终端Markdown查看器 当您远程编辑多个md文件时（例如在较大的项目中），在编辑终端和查看浏览器之间进行上下文切换可能会影响效率。 有时也没有浏览器，例如通过安全网关仅在跳入机器中提供一组固定的应用程序。 ...
利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
HTML5期末大作业——布卡漫画官网(4个页面)HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
html静态网站基于动漫主题网站网页设计与实现共计10个页面——二次元漫画
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
Fox Photo Viewer:基于WebHTML5照片查看器-开源
05-10
•基于Web5HTML5照片查看器的说明•Credits Bootstrap-版权所有:copyright:2021 The Bootstrap Authors-https://getbootstrap.com/ Font Awesome-版权所有:copyright:2021 Fonticons，Inc.-https://fontawesome.com/ jQuery-版权所有:copyright: 2021年jQuery基金会。 -https://jquery.com/•最低要求64 MB RAM 10 MB存储驱动器•支持的Web浏览器Google Chrome 49.0.2623或更高版本Mozilla Firefox 38.0.1或更高版本Microsoft Edge 34.14295或更高版本Opera 36.0.2130.65或更高版本Internet资源管理器11•自述文件除“英语”语言外，所有语言均由Google翻译维护。 遗憾的是，翻译可能不正确和/或不完整。
medview:HTML5 Javascript 中的医疗 (DICOM) 图像查看器
07-14
MedView 的目标是成为能够在任何支持 html5 的设备上使用的医疗 (Dicom) 图像查看器。 查看器显示存储在标准 Dicom 服务器上的图像。 为了与 Dicom 服务器通信，medview 使用 。 单击图像以查看一些视频预览
zoomit:Html5 画布图像查看器专注于缩放容量和大图像
06-21
变焦 Zoomit 是一个 JavaScript 库，它解决了使用 canvas 元素创建图像查看器的问题。 它很容易实现，并带有一个例子。 Zoomit 是一个 javascript 库，允许您使用 DOM 的 CANVAS 元素创建图像查看器。 它非常易于使用，任何对 html 和 javascript 经验最少的人都可以实现。 ＃＃＃特征 无限变焦 通过单元格查看的新方法，无需平移、移动。 现在一切都集中在放大，缩小。 支持任何格式和大小的图像。 ＃＃＃＃ 例子 您可以在 test 文件夹中找到示例。 带有一个基本的 GUI。 ＃＃＃＃执照 麻省理工学院
HTML5图片比对查看器 比较图片异同.rar
07-10
HTML5 CSS3 图片对比查看效果，拖动细线左右移动可比较两张图片的异同，一打开演示页面，相信你就会操作了，两幅图片要仔细看，拖动中间的细线来回看几下，就会发现不同，这种基于HTML5实现的效果，专一用来比较图片异同，十分方便。
JS网页图片查看器－可控制图片放大缩小还原移动效果
学习交流
11-11 841
<br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><title>JS网页图片查看器－可控制图片放大缩小还原移动效果</title><br /><meta http-equiv="imagetoolbar" content="no"><br /><style type="text/css"> <br />body { font-family: "Verd
html查看器查看图片,基于jQuery的一个简单的图片查看器_html/css_WEB-ITnose
weixin_42510453的博客
06-04 891
项目中自己diy了一个图片查看器。因为初始代码不是自己的，只是在上面改了一下也没有弄的很漂亮。等以后有时间了在重写一下样式和封装，作为备用的只是积累吧。如果有童鞋有用到，完全可以在此基础上改，比较容易，代码也比较简单图片查看器主要有几个功能：1.显示图片和图片信息(图片名称、发布者等等)2.切换图片3.关闭图片查看器初始化接口函数pictureViewer.init: function(picIn...
Win10系统怎样让打开图片方式为照片查看器
DY_DAVE的博客
12-08 1036
首先，我们需要使用注册表编辑器来开启Win10系统照片查看器功能，因为其实这个功能是被隐藏了，那么按下Windows徽标键+R键，打开运行命令窗口，输入“regedit”命令。 打开注册表编辑器之后，我们双击左侧的目录，依次打开HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft目录，如
jq图片查看器
zeng092210的博客
08-05 5696
先看效果图 修改内容 修改： 1.gallery.html 路径 2.gallery iframe显示大小 3.下载图片代码 //下载 $download.on("click", function(){ var imgUrl = $image.attr("src"); if(!imgUrl){ alert("下载图片错误!"); return ...
jquery图片查看器 jquery-photo-gallery
weixin_34248118的博客
03-09 1334
引用自http://www.cnblogs.com/lovesong/p/5004951.htmlbug：滚轮缩放，底层页面显示高度也会跟着移动；esc、上、下、左、右键在未点击当前iframe下，并没有生效；修复：未阻止滚轮事件冒泡；图片查看是在新打开的html页面查看，在用户未点击情况下，焦点停留在底层页面，需在打开页面后自动为当前window对象获取焦点，并组织键盘事件...
assetbundle查看器
最新发布
01-30
AssetBundle查看器是一种用于查看和管理AssetBundle文件的工具。AssetBundle是Unity引擎中一种打包资源的格式，可以将一组相关的资源打包成一个文件，然后在运行时加载和使用。 使用AssetBundle查看器，可以方便地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值