HTML+js实现下一章小说文本字体大小与上一章文本字体大小一致

将fontSize参数加入到get请求中,在controller控制层使用model设置数据,然后再传回来

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html" lang="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content=""/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="https://static.zongheng.com/favicon.ico" />
    <title>[[${title}]]</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/basic.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reader.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>

    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>

    <script type="text/javascript" th:src="@{/js/jquery-1.9.1.js}"></script>
</head>
<body class="rb_1">
<div class="head-fixed-reader head-simple">
    <div class="wrap">
        <div class="head-top clearfix">
            <div class="logo imgbox fl">
                <a th:href="@{/index}"><img th:src="@{/picture/logo.png}" alt="logo" /></a>
            </div>
            <form id="commSearch" name="searchForm" method="get" th:action="@{/search}" target="_blank">
                <div class="search-box fl" data-hook="searchSuggest">
                    <label>
                        <input class="search-text fl" name="fictionName" type="text"
                               placeholder="请输入书名"/>
                    </label>
                    <input type="submit" class="search-btn fr"/>
                </div>
            </form>
            <div class="right-wrap-login ud_userTox" style="right: 0">
                <div class="unlogin ud_unlogin clearfix">
                    <div th:if="${session.username==null}" class="login fl"><a class="user_login layui-icon" th:href="@{/login}">&#xe66f;登录</a></div>
                    <div th:if="${session.username==null}" class="regist fl"><a class="user_register layui-icon" th:href="@{/signin}">&#xe672;注册</a></div>
                    <div th:if="${session.username!=null}" class="shelf">
                        <a th:href="@{/shelf}" class="layui-icon" target="_blank">&#xe705;书架</a>
                        <a style="padding-left: 18px;" class="layui-icon" th:href="@{/logout}">&#x1006;注销</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 大包 -->
<div class="readerPageWrap">
    <div class="h20-blank"></div>
    <!-- 推广层 -->
    <div class="goodgame">
        <a href="" target="_blank"></a>
    </div>
    <!-- 主内容 -->
    <div class="rw_3" id="reader_warp">
        <!-- 1.	阅读器头部推荐位 -->
        <div class="com-recbox"></div>
        <!-- 阅读页start -->
        <!-- 包裹层 -->
        <div  class="rft_1">
            <!-- 内容主盒 -->
            <div class="reader_box"  >
                <div class="marker " ></div>
                <div class="title">
                    <div class="iconbox">
                        <em class=""></em>
                    </div>
                    <div th:text="${chapter.chapterTitle}" class="title_txtbox"></div>
                </div>
                <div class="bookinfo">
                    更新时间:<span  th:text="${#dates.format(chapter.createDate, 'yyyy-MM-dd HH:mm')}"></span>
                    <a th:href="'/fiction/chapter/list/'+${chapter.fictionId}" class="reader_lnkbtn" >目录</a>

                </div>
                <div>
                    <button class="reader_box" id="switcher-small">减小字体</button>
                    <button class="reader_box" style="float:right " id="switcher-bigger">增大字体</button>
                </div>

                <div class="reader_line"></div>
                <div class="content" itemprop="acticleBody">
                    <p   class="content" th:utext="${content.content}"></p>
                </div>
                <!-- 订阅盒 -->

                <!-- 作者的话 -->

                <!-- 捧场按钮 -->

                <!-- 操作区 -->
                <div class="chap_btnbox">
                    <a  th:href="'/fiction/chapter/list/'+${chapter.fictionId}">目录</a>

                
                    <a onclick="preC()" href="javascript:void(0)">上一章</a>
                    <a onclick="nextC()" href="javascript:void(0)" class="nextchapter">下一章</a>
                </div>
                <input id="fiction_id" type="hidden" th:value="${chapter.fictionId}"/>
                <input id="sort" type="hidden" th:value="${chapter.sort}"/>
                <input id="fontSize" type="hidden" th:value="${fontSize}"/>
                <div class="ctrl_tips">
                    按“键盘左键←”返回上一章&nbsp;&nbsp;&nbsp;按“键盘右键→”进入下一章&nbsp;&nbsp;&nbsp;按“空格键”向下滚动
                </div>
            </div>
            <!-- /内容主盒 -->
        </div>
        <!-- /包裹层 -->
    </div>
    <!-- 控制手柄 -->
    <div class="h20-blank"></div>
    <!-- /大包 -->
</div>
<script>
    document.onkeydown=function(e){
        let fiction_id=$("#fiction_id").val();
        let sort=$("#sort").val();
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        e=window.event||e;
        switch(e.keyCode){
            case 37: //左键
                window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/1"+"?fontSize="+num;
                break;
            case 39: //右键
                window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/2"+"?fontSize="+num;
                break;
            default:
                break;
        }
    }

    function preC() {
        let fiction_id=$("#fiction_id").val();
        let sort=$("#sort").val();
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/1"+"?fontSize="+num;
    }
    function nextC() {
        let fiction_id=$("#fiction_id").val();
        let sort=$("#sort").val();
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/2"+"?fontSize="+num;
    }

</script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script>
    window.onload = function() {
        var $dddd = $('div.content');
        var fontSize = $('#fontSize').val();
        if (fontSize != null) {
            $dddd.css('fontSize',fontSize+'px');
        }
    };
    $(document).ready(function() {
//字体的放大缩小
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        $('#switcher-bigger').click(function(){
            num = num + 1;
            $biger.css('fontSize',num+'px');
        });
        $('#switcher-small').click(function(){
            num = num - 1;
            $biger.css('fontSize',num+'px');
        });
    });
</script>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值