jquery小说阅读器(前端部分)

最新推荐文章于 2025-03-09 17:13:46 发布

世界还赞颂沉默吗

最新推荐文章于 2025-03-09 17:13:46 发布

阅读量1.6k

点赞数 6

分类专栏： #jQuery 文章标签： jquery html5 css3

本文链接：https://blog.csdn.net/qq_43574741/article/details/120188013

版权

文件链接：下载解压即可运行

阿里云盘链接：https://www.aliyundrive.com/s/Czn98chxyyf

运行截图：
在这里插入图片描述

在这里插入图片描述

已实现功能：用户自定义阅读设置
未实现功能：后端获取目录及txt资源

最难的应该是css布局，细节很多，花了很多时间去完善

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery实现前端小说阅读</title>
		<link rel="stylesheet" href="./noval.css">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div id='page'>
			<!-- 左侧浮动条start -->
			<div id='leftBarList' class='left-bar-list'>
				<dl>
					<dd id="listControl">
						<div class="hover-red">
							<img class='icon leftBarIcon' src="./img/目录.png" />目录
						</div>
					</dd>
					<dd id="styleControl">
						<div class="hover-red">
							<img class='icon leftBarIcon' src="./img/设置.png" />设置
						</div>
						
					</dd>
				</dl>
				<!-- 设置目录浮层satrt -->
				<div id='j_list' class='panel-wrap-list'>
					<div class="hover-red">
						<img id='panelListClose' class="quit" src="img/退出.png" />
					</div>
					
				</div>
				<!-- 设置目录浮层end -->

				<!-- 设置面板浮层satrt -->
				<div id='j_setting' class='panel-wrap-setting'>
					<div class="hover-red">
						<img id='panelSettingClose' class="quit" src="img/退出.png" />
					</div>
					<div class="panel-box">
						<h4>设置</h4>
						<div class="setting-list-wrap">
							<ul>
								<li class="theme-list" id='j_themeList'>

									<i>阅读主题</i>
									<span title="默认" class="theme-0 theme theme-act"></span>
									<span title="牛皮纸" class="theme-1 theme"></span>
									<span title="淡绿色" class="theme-2 theme"></span>
									<span title="浅蓝色" class="theme-3 theme"></span>
									<span title="淡粉色" class="theme-4 theme"></span>
									<span title="灰色" class="theme-5 theme"></span>
									<span title="黑色" class="theme-6 theme"></span>
								</li>
								<li class="font-family" id='j_fontFamily'>
									<i>正文字体</i>
									<span class="font-box font-act" data-fontset='Microsoft YaHei'>
										<div class="hover-red">雅黑</div>
									</span>
									<span class="font-box" data-fontset='SimSun'><div class="hover-red">宋体</div>
									</span>
									<span class="font-box" data-fontset='Kaiti'><div class="hover-red">楷书</div>
									</span>
								</li>

最低0.47元/天解锁文章