webAPP阅读器实现

       学而不死则罔，思而不学则殆。。  

       对手机阅读器进行简单的模拟。整个项目的布局主要包括正常文档流中的文章标题、文章正文及上下翻页按钮，处于非文档流中上下导航栏及选项面板。通过事件进行样式的切换，并利用localStorage进行样式的存储。同时，进行相关文档的撰写。利用分治思想将页面布局进行划分，位于文档流中的正文部分加一层div用于点击时触发处于固定位置上下导航栏及选项面板弹出。位于导航栏及选项面板内部的元素使用绝对定位确定位置。利用JavaScript及jQuery进行元素的DOM操作、样式切换、事件操作、数据存储等。

 

       本文实现的阅读器，文章标题及正文部分位于正常的文档流中，当点击屏幕中间时，弹出顶部及底部导航栏（包括最底部导航栏与样式面板）。其中顶部导航栏主要用于返回文档开始处，对其进行固定定位，确定其弹出后的固定位置；而底部导航栏也设置固定定位，其内主要有目录、字体、阅读模式模块，主要用于对阅读体验效果进行设置。导航栏内部的子元素都处于绝对定位。利用jQuery通过事件交互来动态显示或隐藏导航栏信息。同时，利用localStorage存储设置后的样式效果。这里需要注意，当滚动上下文时导航栏应该隐藏，包括样式面板。其每次设置的样式可以通过localStorage进行存储，这里localStorage可进行封装，防止变量名冲突，然后利用其setItem与getItem进行存取数据。

 

   

 

效果图：

源码：https://github.com/sunshineqt/reader/tree/master/reader/reading

 

ps:

 (function(){
            var Util = (function(){
            var prefix = 'html5_reader';
            // 封装localStorage存储，防止方法中命名冲突,
            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
            }
        })();  


 var bkColor = Util.StorageGetter('background-color');
        if(!bkColor){
            bkColor = 'red';
        }
        RootContainer.css('background-color',bkColor);


$('#bk-container1').click(function(){
                var bkColor = $("#bk-container1").css("background-color");
                RootContainer.css('background-color',bkColor);
                Util.StorageSetter('background-color',bkColor);

                // RootContainer.css('background','#fdf');
});

　　

转载于:https://www.cnblogs.com/haimengqingyuan/p/7264654.html