今天在 Code Pen 試著寫出 http://codepen.io/floraya/pen/yNZKWq?editors=0010 因此做個重點整理,歸納如下:
HTML:(內容簡單明白 省略...)
CSS:
*{margin:0;padding:0;}
body {
overflow: hidden; // 讓內容不要跑出 body 外
}
.nav{
position:fixed; // 這樣導覽列才會固定住(重要)
}
li{
....
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; // 隱藏導覽列 li
}
h1{
font-size:60px;
color:ghostwhite;
text-shadow:0px 0px 15px black; // 頁面(Page1...)陰影功能
}
JQuery:
var num_li = $("li").length // 得到 li 數目
$(window).mousewheel(function(e) {
$("html,body").stop();
...
if (e.deltaY == -1) {
$("body").animate({
"scrollTop": $(".p0" + n).offset().top // 使用動畫 scrollType 方式切換至其它頁面
}, ...
//根據捲軸的位置改變右方導覽列游標的顏色
$(window).scroll(function() {
...
for (i = 0; i <= num_li; i++) {
...
$(".nav li:eq(" + i + ")").click({
id: i
}, function(e) {
....
page = e.data.id + 1;
$(window).resize(function() {
center()
})
//計算導覽列垂直置中的高度
function center() {
pos = $(window).height() / 2 - $(".nav").height() / 2
$(".nav").css("top", pos)
}
這是我抄寫後的位置:http://codepen.io/wuk/pen/XKbzPQ (若有侵權,還請通知刪除)
HTML:(內容簡單明白 省略...)
CSS:
*{margin:0;padding:0;}
body {
overflow: hidden; // 讓內容不要跑出 body 外
}
.nav{
position:fixed; // 這樣導覽列才會固定住(重要)
}
li{
....
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; // 隱藏導覽列 li
}
h1{
font-size:60px;
color:ghostwhite;
text-shadow:0px 0px 15px black; // 頁面(Page1...)陰影功能
}
JQuery:
var num_li = $("li").length // 得到 li 數目
$(window).mousewheel(function(e) {
$("html,body").stop();
...
if (e.deltaY == -1) {
$("body").animate({
"scrollTop": $(".p0" + n).offset().top // 使用動畫 scrollType 方式切換至其它頁面
}, ...
//根據捲軸的位置改變右方導覽列游標的顏色
$(window).scroll(function() {
...
for (i = 0; i <= num_li; i++) {
...
$(".nav li:eq(" + i + ")").click({
id: i
}, function(e) {
....
page = e.data.id + 1;
$(window).resize(function() {
center()
})
//計算導覽列垂直置中的高度
function center() {
pos = $(window).height() / 2 - $(".nav").height() / 2
$(".nav").css("top", pos)
}
這是我抄寫後的位置:http://codepen.io/wuk/pen/XKbzPQ (若有侵權,還請通知刪除)
留言
張貼留言