網頁

HTML

<html>
<head>
<title>蘇澳微電影-微旅行-官方網站</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="Style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="su3.js"></script>
<body>
      <div class="container">
	      <ul>
		       <li></li>
			   <li></li>
			   <li></li>
			   <li></li>
		  </ul>
	  <div class="P01"></div>
	  <div class="P02"></div>
	  <div class="P03"></div>
	  <div class="P04"></div>
	  </div>
</body>
</head>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}

/*插入導覽列*/
.nav{
    position: fixed;
    top: 50%;
    right: 0;
	z-index:3
}
.nav ul li{
    width: 10px;
    height: 10px;
    margin: 10px;
    background-color: #fff;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.5) inset;
    cursor: pointer;
}
.nav ul .active{
    background-color: #43A55F;
}

/*網頁圖片自動縮放*/
.P01{
background-image:url(P01.jpg);
background-size:cover;
height:100vh;
z-index: -1;
}
.P02{
background-image:url(P02.jpg);
background-size:cover;
height:100vh;
z-index: -1;
}
.P03{
background-image:url(P03.jpg);
background-size:cover;
height:100vh;
z-index: -1;
}
.P04{
background-image:url(P04.jpg);
background-size:cover;
height:100vh;
z-index: -1;
}

JavaScript

$(document).ready(function() {
	
    //  點選右方導覽列時會到指定圖片
    var num_li = $(".nav li").length;

    for (var i = 0; i <= num_li; i++) {
        $(".nav li:eq(" + i + ")").click({
            id: i
        }, function(e) {
            $(".nav li").css("background-color", "#FFF");
            var page = e.data.id + 1;
            $("html,body").animate({
                "scrollTop": $(".p0" + page).offset().top
            })
            $(this).css("background-color", "#43a55f");
        })
    }
	
	//  一進入網頁時，將導覽列垂直置中
    center();
	
	//  縮放網頁時，重新將導覽列置中
    $(window).resize(function() {
        center();
    })
	
	//  計算導覽列垂直置中的高度
    function center() {
        var pos = $(window).height() / 2 - $(".nav").height() / 2;
        $(".nav").css("top", pos);
    }
	$(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")
        } 
        
    })
})