Difference between revisions of "Team:NCTU Formosa/Project"
Line 11: | Line 11: | ||
$(window).scroll(function(){ | $(window).scroll(function(){ | ||
if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){ | if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){ | ||
− | $(". | + | $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標,其他都恢復成原來的顏色 |
− | $(". | + | $(".sidenav li:eq(0)").css("background-color","#ffffff") |
}else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){ | }else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){ | ||
− | $(". | + | $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標,其他都恢復成原來的顏色 |
− | $(". | + | $(".sidenav li:eq(1)").css("background-color","#ffffff") |
}else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){ | }else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){ | ||
− | $(". | + | $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標,其他都恢復成原來的顏色 |
− | $(". | + | $(".sidenav li:eq(2)").css("background-color","#ffffff") |
}else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){ | }else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){ | ||
− | $(". | + | $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標,其他都恢復成原來的顏色 |
− | $(". | + | $(".sidenav li:eq(3)").css("background-color","#ffffff") |
}else if($(window).scrollTop()>=$(".p05").offset().top){ | }else if($(window).scrollTop()>=$(".p05").offset().top){ | ||
− | $(". | + | $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標,其他都恢復成原來的顏色 |
− | $(". | + | $(".sidenav li:eq(4)").css("background-color","#ffffff") |
} | } | ||
}) | }) | ||
Line 31: | Line 31: | ||
var num_li=$("li").length | var num_li=$("li").length | ||
for(i=0;i<=num_li;i++){ | for(i=0;i<=num_li;i++){ | ||
− | $(". | + | $(".sidenav li:eq("+i+")").click({id:i},function(e){ |
$("html,body").stop() | $("html,body").stop() | ||
− | $(". | + | $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標,其他都恢復成原來的顏色 |
page=e.data.id+1 | page=e.data.id+1 | ||
$("html,body").animate({"scrollTop":$(".p0"+page).offset().top}) | $("html,body").animate({"scrollTop":$(".p0"+page).offset().top}) | ||
− | $(". | + | $(".sidenav li:eq("+e.data.id+")").css("background-color","#ffffff")//被點擊到的游標變色,前面的selector用this也可以 |
}) | }) | ||
} | } | ||
Line 49: | Line 49: | ||
//計算導覽列垂直置中的高度 | //計算導覽列垂直置中的高度 | ||
function center(){ | function center(){ | ||
− | pos=$(window).height()/2-$(". | + | pos=$(window).height()/2-$(".sidenav").height()/2 |
− | $(". | + | $(".sidenav").css("top",pos) |
} | } | ||
Line 99: | Line 99: | ||
} | } | ||
/* 插入導覽列 */ | /* 插入導覽列 */ | ||
− | . | + | .sidenav{ |
position: fixed; | position: fixed; | ||
top:50%; | top:50%; | ||
Line 105: | Line 105: | ||
cursor:pointer; | cursor:pointer; | ||
} | } | ||
− | + | li.navli{ | |
width:15px; | width:15px; | ||
height:15px; | height:15px; | ||
Line 131: | Line 131: | ||
<body> | <body> | ||
<div class="container"> | <div class="container"> | ||
− | <div class=" | + | <div class="sidenav"> |
<ul> | <ul> | ||
− | <li style="background-color:#ffffff"><SPAN>Project</SPAN></li> | + | <li class="navli" style="background-color:#ffffff"><SPAN>Project</SPAN></li> |
− | <li><SPAN>Background</SPAN></li> | + | <li class="navli"><SPAN>Background</SPAN></li> |
− | <li><SPAN>Design</SPAN></li> | + | <li class="navli"><SPAN>Design</SPAN></li> |
− | <li><SPAN>Result</SPAN></li> | + | <li class="navli"><SPAN>Result</SPAN></li> |
− | <li><SPAN>Modeling</SPAN></li> | + | <li class="navli"><SPAN>Modeling</SPAN></li> |
</ul> | </ul> |
Revision as of 08:01, 6 August 2015
<!doctype html>