2015年4月20日 星期一

jQuery學習筆記 第八堂-3(單頁式網頁設計:製作回到網頁頂端按鈕)



本堂課主要是延續上一篇jQuery學習筆記 第八堂-2,這次加入了「回到頁頂」的按鈕效果,點這裡看結果

關於如何回到網頁頂端的按鈕製作方式,其實在之前的網誌中已經介紹過了( 在網頁(blogger)中加入回到網頁頂端的浮動按鈕),這裡再做一個比較清楚的說明。

STEP 1建立「向上」的按鈕樣式

建立「向上」按鈕樣式的方法很多,這裡我打算直接使用Font Awesome所提供的圖案(關於Font Awesome的使用可以參考這篇:如何使用Font Awesome所提供的各種icon)。

首先,在<head></head>中間插入匯入FontAwesome的語法


接著,在網頁的最下方,我新增一個class為「gotop」的區塊,裡面就嵌入Font Awesome的圖片


這時候,網頁的最左下方就會出現一個向上的圖案了(第一次使用Font Awesome的時候,可能會需要花一些時間,才會讀取到該圖片)



接著,我就來幫這個向上的按鈕,透過CSS的方式,改變成我想要的顏色,並且放到我想要的位置,這裡用position: fixed是因為我們希望該圖片會一直固定在瀏覽器的右下角,cursor:pointer,則是當網友把滑鼠移到這個圖片的時候,它會呈現出像是「手指」可以點擊這樣的符號。



最後按鍵的結果就會固定在瀏覽器的右下角。


撰寫回到頁頂的jQuery語法

語法很簡單,告訴它,當這個按鈕被點擊的時候,幫我回到網頁頂端


比較需要留意的是這裡有一個n=1的指令,之所以要有這個指令,是因為在我們前一堂課中所使用的mousewheel功能,如果網友已經看到最後一頁,按回到頁頂的按鈕,這時候畫面會跳到第一頁,但是如果沒有更新讓n=1,這時候網友如果滾動滑鼠的話,會直接跳到最後一頁。

當網友離開第一頁後才產生gotop按鈕

最後一步,我們希望當網友離開第一頁,到達第二頁後,gotop按鈕才顯示出來,寫法像這樣子:


這裡比較要注意的地方是,最上面有一行$(".gotop").fadeOut(0),這個的用意是在一開始進入網頁的時候,不要出現gotop按鈕,fadeOut裡面的0是duration,設成0是因為一進來就不要看到。

if的指令裡面用>=$(".p02").offset().top,意思是如果現在捲軸的位置大於等於第二頁的話,在出現(fadeIn),否則不要出現(fadeOut),在一般的情況下,我們也可以設成「if($(window).scrollTop()>0)」就可以了。


寫到這就完成這個回到頁頂的按鈕了!

看一下我們的程式碼:
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>單頁輪撥式網站設計</title>
<!--    匯入FontAwesome   -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--    匯入jQuery    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="jquery.mousewheel.min.js"></script>
    <script>
        $(document).ready(function(){
            var num_li=$("li").length//偵測我們有幾個標點(圖片)
            
            //滾動滑鼠滾輪時,移動到上一頁、下一頁的效果
            n=1
            moving=0
            $(window).mousewheel(function(e){
                $("html,body").stop()
                if(moving==0){
                    moving=1
                    if(e.deltaY==-1){
                        if(n<num_li){
                            n++
                        }
                    }else{
                        if(n>1){
                            n--
                        }
                    }
                }
                $("html,body").animate({"scrollTop":$(".p0"+n).offset().top},function(){moving=0})
            })
            
            //根據捲軸的位置改變右方導覽列游標的顏色
            $(window).scroll(function(){
                 if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標,其他都恢復成原來的顏色
                    $(".nav li:eq(0)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標,其他都恢復成原來的顏色
                    $(".nav li:eq(1)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標,其他都恢復成原來的顏色
                    $(".nav li:eq(2)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標,其他都恢復成原來的顏色
                    $(".nav li:eq(3)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p05").offset().top){
                    $(".nav li").css("background-color","white")//除了被點擊到的游標,其他都恢復成原來的顏色
                    $(".nav li:eq(4)").css("background-color","#46dd46")
                }
            })
                     
            //點選右方導覽列時會到指定圖片
            for(i=0;i<=num_li;i++){
                $(".nav li:eq("+i+")").click({id:i},function(e){
                    $("html,body").stop()
                    $(".nav li").css("background-color","white")//除了被點擊到的游標,其他都恢復成原來的顏色
                    page=e.data.id+1
                    $("html,body").animate({"scrollTop":$(".p0"+page).offset().top})
                    $(".nav li:eq("+e.data.id+")").css("background-color","#46dd46")//被點擊到的游標變色,前面的selector用this也可以
                    n=e.data.id+1
                })
            }
            //一進入網頁時,將導覽列垂直置中計算導覽列置中的位置
           center()
            
           //縮放網頁時,將導覽列垂直置中
            $(window).resize(function(){
                center()
            })
            
            //計算導覽列垂直置中的高度
            function center(){
                pos=$(window).height()/2-$(".nav").height()/2
                $(".nav").css("top",pos)
            }
            
            //離開頁頂時才出現gotop按鈕
            $(".gotop").fadeOut(0)
            $(window).scroll(function(){
                if($(window).scrollTop()>=$(".p02").offset().top){
                    $(".gotop").fadeIn()
                }else{
                    $(".gotop").fadeOut()
                }
            })
            
            //點擊goptop時回到頁頂
            $(".gotop").click(function(){
                $("html,body").stop()
                $("html,body").animate({"scrollTop":"0"})
                n=1
            })
        })
    </script>
<style>
    *{
        padding:0;
        margin:0;
    }
    body{
        overflow: hidden;
    }
/*    插入背景圖片    */
    .p01{
        background-image:url(images/p01.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p02{
        background-image:url(images/p02.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p03{
        background-image:url(images/p03.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p04{
        background-image:url(images/p04.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p05{
        background-image:url(images/p05.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
/*    插入導覽列     */
    .nav{
        position: fixed;
        top:50%;
        right:0px;
        cursor:pointer;
    }
    li{
        width:10px;
        height:10px; 
        margin: 10px;
        background-color: white;
        border-radius: 5px;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.5) inset,-1px -1px 1px rgba(0,0,0,0.5) inset;
        list-style-type: none;
    }
    h1{
        font-size:60px;
        color:ghostwhite;
        text-shadow:0px 0px 15px black;
    }
    .gotop{
        color:rgba(226,248,156,0.9);
        position:fixed;
        bottom:2vh;
        right:5vh;
        cursor:pointer;
    }
</style>
</head>
<body>
<div class="container">
    <div class="nav">
        <ul>
            <li style="background-color:#46dd46"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="p01"><h1>Page 1</h1></div>
    <div class="p02"><h1>Page 2</h1></div>
    <div class="p03"><h1>Page 3</h1></div>
    <div class="p04"><h1>Page 4</h1></div>
    <div class="p05"><h1>Page 5</h1></div>
</div>
<div class="gotop">
    <i class="fa fa-arrow-circle-up fa-2x"></i>
</div>


</body>
</html>

點這裡看結果

以上內容均為本人在馬老師雲端研究室學習所整理之筆記
Share:

0 意見:

張貼留言