慕课网实战项目《WebAPP书城整站开发》笔记六:字体面板中“背景”切换的交互开发
来源:互联网 发布:js求字符串字节长度 编辑:程序博客网 时间:2024/05/17 22:00
推荐IMOOC实战课程:《WebApp书城整站开发》
效果图
任务分解描述
- 本效果需要实现的是图中点击字体按钮后弹出一个可以设置字体颜色和大小的面板;
- 点击面板上的‘大’和‘小’可以设置字体的大小(已完成);
- 点击面板上的颜色圆圈可以切换阅读器的背景颜色;
- 要求在刷新页面时,能保留设置状态;
- 使用js技术事件绑定、localstorage保持和记录字体状态。
实现细节
html
<!--内容区--> <div class="container" id="root"> <!--字体背景设置区--> <div class="nav-pannel-bk font-container" id="font-container" style="display:none"></div> <div class="nav-pannel font-container" id="font_container" style="display:none"> <div class="child-mod"> <span>字号</span> <button id="large-font" class="spe-button"> 大 </button> <button id="small-font" class="spe-button" style="margin-left:10px;"> 小 </button> </div> <div class="child-mod" id="bk-container"> <span>背景</span> </div> </div> <!--BOTTOM区--> <div class="bottom-nav-bk bottom_nav" style="display:none"></div> <div class="bottom-nav bottom_nav" style="display:none"> <div class="item menu-button" id="menu_button"> <div class="item-warp"> <div class="icon-menu"></div> <div class="icon-text"> 目录 </div> </div> </div> <div class="item" id="font-button"> <div class="item-warp"> <div class="icon-ft"></div> <div class="icon-text"> 字体 </div> </div> </div> <div class="item" id="night-button"> <div class="item-warp" style="display:none" id="day_icon"> <div class="icon-day"></div> <div class="icon-text"> 白天 </div> </div> <div class="item-warp" id="night_icon"> <div class="icon-night"></div> <div class="icon-text"> 夜间 </div> </div> </div> </div> </div>
javascript
(function() {'use strict'; // 触发ES6 // 模块模式 var Util = (function() { var prefix = 'ficiton_reader_'; var StorageGetter = function(key) { return localStorage.getItem(prefix + key); } var StorageSetter = function(key, val) { return localStorage.setItem(prefix + key, val); } return { StorageGetter : StorageGetter, StorageSetter : StorageSetter } })(); function main() { var RootContainer = $('#fiction_container'); // 绑定事件 var ScrollLock = false; var Doc = document; var Screen = Doc.body; var Win = $(window); //初始化的字体大小 var InitFontSize; //dom节点的缓存 var Dom = { bottom_tool_bar : $('#bottom_tool_bar'), nav_title : $('#nav_title'), bk_container : $('#bk-container'), night_button : $('#night-button'), back_button : $('#back_button'), top_nav : $('#top-nav'), bottom_nav : $('.bottom_nav') } //从缓存中读取的信息进行展示 var ModuleFontSwitch = (function() { //字体和背景的颜色表 var colorArr = [{ value : '#f7eee5', name : '米白', font : '' }, { value : '#e9dfc7', name : '纸张', font : '', id : "font_normal" }, { value : '#a4a4a4', name : '浅灰', font : '' }, { value : '#cdefce', name : '护眼', font : '' }, { value : '#283548', name : '灰蓝', font : '#7685a2', bottomcolor : '#fff' }, { value : '#0f1410', name : '夜间', font : '#4e534f', bottomcolor : 'rgba(255,255,255,0.7)', id : "font_night" }]; var tool_bar = Util.StorageGetter('toolbar_background_color'); var bottomcolor = Util.StorageGetter('bottom_color'); var color = Util.StorageGetter('background_color'); var font = Util.StorageGetter('font_color'); var bkCurColor = Util.StorageGetter('background_color'); var fontColor = Util.StorageGetter('font_color'); for (var i = 0; i < colorArr.length; i++) { var display = 'none'; if (bkCurColor == colorArr[i].value) { display = ''; } Dom.bk_container.append('<div class="bk-container" id="' + colorArr[i].id + '" data-font="' + colorArr[i].font + '" data-bottomcolor="' + colorArr[i].bottomcolor + '" data-color="' + colorArr[i].value + '" style="background-color:' + colorArr[i].value + '"><div class="bk-container-current" style="display:' + display + '"></div><span style="display:none">' + colorArr[i].name + '</span></div>'); } RootContainer.css('min-height', $(window).height() - 100); if (bottomcolor) { $('#bottom_tool_bar_ul').find('li').css('color', bottomcolor); } if (color) { $('body').css('background-color', color); } if (font) { $('.m-read-content').css('color', font); } //字体设置信息 InitFontSize = Util.StorageGetter('font_size'); InitFontSize = parseInt(InitFontSize); if (!InitFontSize) { InitFontSize = 18; } RootContainer.css('font-size', InitFontSize); })(); //页面中的零散交互事件处理 var EventHandler = (function() { //字体和背景颜色的信息设置 Dom.bk_container.delegate('.bk-container', 'click', function() { var color = $(this).data('color'); var font = $(this).data('font'); var bottomcolor = $(this).data('bottomcolor'); var tool_bar = font; Dom.bk_container.find('.bk-container-current').hide(); $(this).find('.bk-container-current').show(); if (!font) { font = '#000'; } if (!tool_bar) { tool_bar = '#fbfcfc'; } if (bottomcolor && bottomcolor != "undefined") { $('#bottom_tool_bar_ul').find('li').css('color', bottomcolor); } else { $('#bottom_tool_bar_ul').find('li').css('color', '#a9a9a9'); } $('body').css('background-color', color); $('.m-read-content').css('color', font); Util.StorageSetter('toolbar_background_color', tool_bar); Util.StorageSetter('bottom_color', bottomcolor); Util.StorageSetter('background_color', color); Util.StorageSetter('font_color', font); }); var font_container = $('.font-container'); var font_button = $('#font-button'); var menu_container = $('#menu_container'); font_button.click(function() { if (font_container.css('display') == 'none') { font_container.show(); font_button.addClass('current'); } else { font_container.hide(); font_button.removeClass('current'); } }); RootContainer.click(function() { font_container.hide(); font_button.removeClass('current'); }); })(); } return main();})();
实现效果
阅读全文
0 0
- 慕课网实战项目《WebAPP书城整站开发》笔记六:字体面板中“背景”切换的交互开发
- 慕课网实战项目《WebAPP书城整站开发》笔记四:唤出字体面板交互开发
- 慕课网实战项目《WebAPP书城整站开发》笔记三:触屏唤出上下边栏交互开发和优化
- 慕课网实战项目《WebAPP书城整站开发》笔记五:字体大小设置交互开发
- 慕课网实战项目《WebAPP书城整站开发》笔记二:基本的JS代码结构
- 慕课网实战项目《WebAPP书城整站开发》笔记一:底部边栏样式实现
- WebApp开发实战视频教程
- Eclipse中项目面板字体的修改
- Eclipse中项目面板字体的修改
- webApp项目开发总结
- 基于开源项目的WebApp开发
- 项目管理---git----快速使用git笔记(六)------本地开发与远程仓库的交互----常用git命令
- react项目实战(权限模块开发六)semantic-ui-react 加入到开发环境中
- WebApp 开发中常用的代码片段
- WebApp 开发中常用的代码片段
- iOS项目开发实战——Label中字体字号与Label多行显示
- HBuilder webApp开发(六)事件绑定
- Cordova webapp实战开发:(1)为什么选择 Cordova webapp?
- Html5斜45度地图+3D模型ARPG系列教程(5)-- 地图编辑器
- AlphaGo的神力来自何处?
- c语言基础-函数08
- Html5斜45度地图+3D模型ARPG系列教程(4)-- 地图切块及动态加载
- c# 消息框 MessageBox对象的使用
- 慕课网实战项目《WebAPP书城整站开发》笔记六:字体面板中“背景”切换的交互开发
- c语言基础-进制09
- c# 登录界面设计与框架基础搭建雏形--(学生管理系统)
- javabean
- Lisp 语言中 split 的实现方法与效率
- c语言基础系列-原码 反码 补码10
- 代码开源 | COCO-16 图像分割冠军:首个全卷积端到端实例分割模型(HR)
- c语言基础-位运算11
- 推荐Github星级Top10的深度学习项目