慕课网实战项目《WebAPP书城整站开发》笔记六:字体面板中“背景”切换的交互开发
2017-05-23 06:40
316 查看
推荐IMOOC实战课程:《WebApp书城整站开发》
点击面板上的‘大’和‘小’可以设置字体的大小(已完成);
点击面板上的颜色圆圈可以切换阅读器的背景颜色;
要求在刷新页面时,能保留设置状态;
使用js技术事件绑定、localstorage保持和记录字体状态。
效果图
任务分解描述
本效果需要实现的是图中点击字体按钮后弹出一个可以设置字体颜色和大小的面板;点击面板上的‘大’和‘小’可以设置字体的大小(已完成);
点击面板上的颜色圆圈可以切换阅读器的背景颜色;
要求在刷新页面时,能保留设置状态;
使用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(); })();
实现效果
相关文章推荐
- 慕课网实战项目《WebAPP书城整站开发》笔记四:唤出字体面板交互开发
- 慕课网实战项目《WebAPP书城整站开发》笔记五:字体大小设置交互开发
- 慕课网实战项目《WebAPP书城整站开发》笔记三:触屏唤出上下边栏交互开发和优化
- iOS项目开发实战——自定义设置导航栏和状态栏背景
- 2017.7.1 慕课网-Java从零打造企业级电商项目实战:3 category模块设计与开发
- iOS项目开发实战——Label中字体字号与Label多行显示
- 慕课网实战项目《WebAPP书城整站开发》笔记一:底部边栏样式实现
- 【实战\Java SSM快速开发仿慕课网在线教育平台项目笔记】第2章 项目各种结构概览(业务, 技术,角色,数据库,项目)
- iOS项目开发实战——自定义控件背景与颜色
- 慕课网实战项目《WebAPP书城整站开发》笔记二:基本的JS代码结构
- webpack开发vue2项目中的一些坑(1、跨域 2、打包后后端访问一片空白3、加载第三方库的字体文件出错4、加载背景图出错)
- 【实战\Java SSM快速开发仿慕课网在线教育平台项目笔记】第1章 课程项目整体概述(整体介绍及Eclipse,Maven,新浪SAE软件平台介绍)
- 2017.7.1 慕课网-Java从零打造企业级电商项目实战:3 category模块设计与开发
- 慕课网 项目实战 使用struts2和hibernate开发学生信息管理系统
- iOS项目开发实战——实现视图切换动画
- iOS项目开发实战——Swift实现多个TableView的侧滑与切换
- 2017.7.1 慕课网-Java从零打造企业级电商项目实战:2用户模块设计与开发
- 3天搞定的小型B/S内部管理类软件定制开发项目【软件开发实战10步骤详解】
- 3天搞定的小型B/S内部管理类软件定制开发项目【软件开发实战10步骤详解】
- 3天搞定的小型B/S内部管理类软件定制开发项目【软件开发实战10步骤详解】