javascript實現移動端網頁版閱讀器

時間 2019-11-18

標籤 javascript 實現移動網頁閱讀器欄目 JavaScript 简体版

原文原文鏈接

如今手機上的文本閱讀app已經很是豐富，良好的閱讀體驗與海量的書庫經常令我感到無比興奮。

我想到8年前用一點幾寸屏幕的mp3看電子書的情景，頓生一種淡淡的舒適。再久遠一些，小的時候，我也常常和小夥伴們組團去書店看白書，也就是白看書。古老的木質書架上那一疊疊厚重的黃皮小說書，在年幼的咱們眼裏彷彿是比盤子裏的午飯肉更加美味可口的東西。

而在當今這個信息化的時代，看書變得空前的便利，但是兒時那種期待和興奮的感覺卻消失在了時間的長河。

歲月在流逝，時代在進步。

願放下全部的浮躁，在新的時代愉快地生活，無所謂明天怎樣，我都相信確定比今天更好。

本文以一個網頁版閱讀器做爲案例，展現JavaScript中，對滾動條的一些處理，這是完成之後的樣子：

當我滾動條往上滾動的時候，屏幕右下角會出現一個向上的箭頭：

而往下滾動的時候，又自動消失。

當我點擊這個半透明的箭頭按鈕，就會自動滑動到章節的最頂端。

本章就實現這個小功能。

開發工具：HBuilder（我的喜歡，順從潮流放棄了使用大半年的EditPlus，不過EditPlus確實鍛鍊了我拼寫單詞的能力）

測試環境：谷歌瀏覽器
正文
1. 頁面佈局與繪製

咱們寫一個基本的html模板

javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>TextReader</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>

    </body>
</html>

接着，咱們把背景圖片引入進來（尺寸略有調整）：

css

body{
    background: url(bg.jpg) no-repeat;
    background-size: 100%;
}

咱們先寫一個div，做爲盛放整個手機的父容器。
在它的css樣式中，咱們作了居中定位（水平）。

html

.phone {
    width:322px ;
    height:550px;
    position:relative;
    left:35%;
    top:35px;
    background: #66CC00;
}

<div class='phone'></div>

接下來，引入上下兩端的樣式圖片。

其實，手機的頂部和底部就是兩張圖片：

咱們先把頂部圖片引入進來，在引入圖片以前，先畫兩個div來盛放圖片。

java

<body>
    <div class='phone'>
        <div class='phone_top'></div>

        <div class='phone-bottom'></div>
    </div>
</body>

而後，經過背景圖的方式把圖片貼進來。

jquery

.phone .phone_top {
    background: url(phone_top.png);
    height:42px;
}

.phone .phone-bottom  {
    background: url(phone_bottom.png);
    position: absolute;
    height: 42px;
    width: 100%;
    bottom: 0;
}

這樣一來，一個手機的大概模子就出來了，接下來，咱們把屏幕區域加上去。

web

.phone .container{
    overflow-x: hidden;
    overflow-y: auto;
    width:90%;
    background:#ccc;
    height:456px;
    font-size:14px;
    text-align:left;
    background:#dcf3dc;
    font-family:微軟雅黑;
    color:#555;
    line-height:28px;
    padding:16px;
    text-indent: 2em;
    padding: 16px 16px 0px 16px;
}

<body>
    <div class='phone'>
        <div class='phone_top'></div>
        <div class='container'></div>
        <div class='phone-bottom'></div>
    </div>
</body>

OK，如今能夠把父容器的背景色給去掉了。

瀏覽器

background: #66CC00; //去掉

爲了把手機模型作得更像一點，咱們手動給它加一個按鈕，額，就手動畫一個吧。

app

.back {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    border: 2px solid #c7bcbc;
    top: 4px;
    border-radius: 50%;
}

<div class='phone-bottom'>
    <span class='back'></span>
</div>

雖然span是行內元素，可是由於咱們給它設置了 position: absolute ，因此寬度和高度依然是起做用的。

我也是在寫這個案例的時候無心中發現的，我之前一直覺得須要手動給行內元素升級爲塊級元素才行。

這樣，咱們的頁面佈局差很少久完成啦。
2. 文字部分設計與美化

接下來，咱們給閱讀器模擬一些數據。

工具

<body>
    <div class='phone'>
        <div class='phone_top'></div>
        <div class='container'>
            <h4>刀劍神域 </h4>
            <p>
                    在一羣好奇心旺盛的高手花了整整一個月測量後，發現最底層區域的直徑大約有十千米，足以輕鬆容納下整個世田谷區。再加上堆積在上面百層左右的樓層，其寬廣的程度可說超乎想像。總體的檔案量大到根本沒法測量。 這樣的空間內部有好幾個都市、爲數衆多的小型街道與村落、森林和草原，甚至還有湖的存在。而鏈接每一個樓層之間的階梯只有一座，階梯還都位於充斥怪物的危險迷宮區域之中，所以要發現並經過階梯能夠說是至關困難。但只要有人可以突破阻礙抵達上面的樓層，上下層各都市的「轉移門」便會連結起來，人們也就能夠自由來去兩個樓層之間。
            </p>
            <p>
                    通過兩年的時間，這個巨大城堡就這樣被逐漸地往上攻略，目前已到達第七十四層。城堡的名稱是「艾恩葛朗特」。這座持續飄浮在空中、吞噬了將近六千人，充滿着劍與戰鬥的世界。它的另外一個名字是——SwordArtOnline刀劍神域」。閃爍着深灰色光芒的劍尖，淺淺地劃過個人肩膀。 那固定顯示在視線左上角的細長橫線，好不容易縮短了長度。同時，彷佛有隻冰冷的手掌，撫摸過我胸口深處。
            </p>
            <p>
                    橫線——那稱爲HP條的藍色條狀物，能夠看出個人生命殘值。雖然它還有八成左右的殘值，但不能把事情看得太過於樂觀。由於相對來講，我已經朝死亡深淵前進了兩步。 在敵人的劍再度進入攻擊動做以前，我就先日後跳開一大步，以保持與敵人之間的距離。
            </p>
            <p>「呼……」
            </p>
            <p>硬是吐了一大口氣來調整一下氣息。在這個世界的「身體」雖然不須要氧氣，但在另外一邊，也就是躺在真實世界裏的真正身體，如今呼吸應該很是劇烈。而隨意擺放的手應該正流着大量冷汗，心跳也加速到破錶了吧。 </p>

            <p>這也是理所固然的事。就算我眼前所見所有都是虛擬的立體影像對象，減小的也只是數值化的生命值，但我如今的確是賭上本身的性命在戰鬥。 從賭上性命這點來看，這場戰鬥真是至關不公平。由於，眼前的「敵人」——這除了擁有閃耀着光芒的深綠鱗片皮膚與長手臂外，還有着蜥蜴頭與尾巴的半人半獸怪物，不僅外表不是人類、甚至沒有真實的生命。它只不過是不論被殺掉多少次，均可以由系統無限重生的數字文件檔案集合體。 </p>
            <p>不對。 目前，操縱這隻蜥蜴人的AI程序正在觀察、學習個人戰鬥方式，用以不斷提高本身的應對能力。但這些學習檔案，在該個體消滅後便會重置，並且不會反饋到下次出如今這個區域的同種個體上。
            </p>

        </div>
        <div class='phone-bottom'>
            <span class='back'></span>
        </div>
    </div>
</body>

滾動條的樣式不太美觀，咱們將其美化一下

/** 滾動條樣式美化 */佈局

::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}
::-webkit-scrollbar-button{background-color:#e5e5e5;}
::-webkit-scrollbar-track{background:#999;}
::-webkit-scrollbar-track-piece{background:#ccc}
::-webkit-scrollbar-thumb{background:#666;}
::-webkit-scrollbar-corner{background:#82AFFF;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

這樣就好看多了。

標題部分有一點突兀，咱們給出四條美化的建議：

1. 標題居左對齊
2. 底部畫一條線，與小說正文分開，而且空開一些。
3. 字體顏色稍微淡一些，不要太黑
4. 字間稍微距大一些

因而

.phone .container h4 {
    text-indent: 0;
    margin-bottom: 1em;
    color:#736357;
    border-bottom:1px solid #736357;
    letter-spacing: 2px;
}

這樣好看一些了吧，固然，每一個人審美觀不一樣啦，你也能夠調成本身喜歡的樣式。

段落之間和文字間距都過小了，咱們也調一下，不要那麼小氣嘛，哈哈。

.phone .container p {
    margin-bottom: 15px;
    letter-spacing: 2px;
}

恩，好多了。
3. 引入向上的箭頭圖標

咱們準備了一張半透明的箭頭圖標，如今將其引入。

<body>
    <div class='phone'>
        <div class='phone_top'></div>
        <div class='container'>

            <span id='toTop'></span>

            <h4>刀劍神域</h4>
            <p>
                在一羣好奇心旺盛的高手花了整整一個月測量後，發現最底層區域的直徑大約有十千米，足以輕鬆容納下整個世田谷區。再加上堆積在上面百層左右的樓層，其寬廣的程度可說超乎想像。總體的檔案量大到根本沒法測量。 這樣的空間內部有好幾個都市、爲數衆多的小型街道與村落、森林和草原，甚至還有湖的存在。而鏈接每一個樓層之間的階梯只有一座，階梯還都位於充斥怪物的危險迷宮區域之中，所以要發現並經過階梯能夠說是至關困難。但只要有人可以突破阻礙抵達上面的樓層，上下層各都市的「轉移門」便會連結起來，人們也就能夠自由來去兩個樓層之間。
            </p>
            <p>
                通過兩年的時間，這個巨大城堡就這樣被逐漸地往上攻略，目前已到達第七十四層。城堡的名稱是「艾恩葛朗特」。這座持續飄浮在空中、吞噬了將近六千人，充滿着劍與戰鬥的世界。它的另外一個名字是——SwordArtOnline刀劍神域」。閃爍着深灰色光芒的劍尖，淺淺地劃過個人肩膀。 那固定顯示在視線左上角的細長橫線，好不容易縮短了長度。同時，彷佛有隻冰冷的手掌，撫摸過我胸口深處。
            </p>
            <p>
                橫線——那稱爲HP條的藍色條狀物，能夠看出個人生命殘值。雖然它還有八成左右的殘值，但不能把事情看得太過於樂觀。由於相對來講，我已經朝死亡深淵前進了兩步。 在敵人的劍再度進入攻擊動做以前，我就先日後跳開一大步，以保持與敵人之間的距離。
            </p>
            <p>「呼……」
            </p>
            <p>硬是吐了一大口氣來調整一下氣息。在這個世界的「身體」雖然不須要氧氣，但在另外一邊，也就是躺在真實世界裏的真正身體，如今呼吸應該很是劇烈。而隨意擺放的手應該正流着大量冷汗，心跳也加速到破錶了吧。 </p>

            <p>這也是理所固然的事。就算我眼前所見所有都是虛擬的立體影像對象，減小的也只是數值化的生命值，但我如今的確是賭上本身的性命在戰鬥。 從賭上性命這點來看，這場戰鬥真是至關不公平。由於，眼前的「敵人」——這除了擁有閃耀着光芒的深綠鱗片皮膚與長手臂外，還有着蜥蜴頭與尾巴的半人半獸怪物，不僅外表不是人類、甚至沒有真實的生命。它只不過是不論被殺掉多少次，均可以由系統無限重生的數字文件檔案集合體。 </p>
            <p>不對。 目前，操縱這隻蜥蜴人的AI程序正在觀察、學習個人戰鬥方式，用以不斷提高本身的應對能力。但這些學習檔案，在該個體消滅後便會重置，並且不會反饋到下次出如今這個區域的同種個體上。
            </p>

        </div>
        <div class='phone-bottom'>
            <span class='back'></span>
        </div>
    </div>
</body>

樣式以下：

.phone .container #toTop {
    width: 40px;
    height: 60px;
    display: inline-block;
    position: absolute;
    background: url(top.png) no-repeat;
    background-size: 100%;
    bottom:80px;
    right: 15px;
    opacity: 0.7;
}

引進來了。
4. js控制

咱們經過jQuery的animate方法來實現回到頂部的動畫，實現該功能的核心邏輯就是控制滾動條距離頂部的高度，也就是scrollTop，讓它變爲0就能夠了。

//單機圖標直接返回頂部

$('#toTop').on('click',function(){
    $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){
        $('#toTop').css({'opacity' : 0});
    });

    return false;
});

最後，咱們還但願實現的一個效果就是，只有在滾動條往上拖動的時候，才把按鈕顯示出來，不然就隱藏該按鈕。畢竟，咱們在閱讀的時候都不但願一直有個小圖標吧。

實現思路也很簡單，就是判斷當前滾動條究竟是向上滾動呢，仍是向下滾動？

而後設置按鈕的透明度就好了，這時候，咱們須要對滾動條進行監聽，若是向上滾動就顯示按鈕，不然隱藏按鈕，實現代碼以下：

var justScrollTop = 0; //記錄上一次滾動條距離頂部的位置

//滾動條監聽事件

$('.phone .container').on('scroll',function(e){
    if(e.target.scrollTop > justScrollTop){
        $('#toTop').css({'opacity' : 0});     //隱藏
    }else{
        $('#toTop').css({'opacity' : 0.8});   //顯示
    }

    justScrollTop = e.target.scrollTop;
});

效果：

原文連接 http://www.jianshu.com/p/0d12a945f0d6#