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){
−
                     $(".nav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
                     $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
−
                     $(".nav li:eq(0)").css("background-color","#ffffff")
+
                     $(".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){
−
                     $(".nav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
                     $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
−
                     $(".nav li:eq(1)").css("background-color","#ffffff")
+
                     $(".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){
−
                     $(".nav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
                     $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
−
                     $(".nav li:eq(2)").css("background-color","#ffffff")
+
                     $(".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){
−
                     $(".nav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
                     $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
−
                     $(".nav li:eq(3)").css("background-color","#ffffff")
+
                     $(".sidenav li:eq(3)").css("background-color","#ffffff")
 
                 }else if($(window).scrollTop()>=$(".p05").offset().top){
 
                 }else if($(window).scrollTop()>=$(".p05").offset().top){
−
                     $(".nav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
                     $(".sidenav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
−
                     $(".nav li:eq(4)").css("background-color","#ffffff")
+
                     $(".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++){
−
                 $(".nav li:eq("+i+")").click({id:i},function(e){
+
                 $(".sidenav li:eq("+i+")").click({id:i},function(e){
 
                     $("html,body").stop()
 
                     $("html,body").stop()
−
                     $(".nav li").css("background-color","transparent")//除了被點擊到的游標，其他都恢復成原來的顏色
+
                     $(".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})
−
                     $(".nav li:eq("+e.data.id+")").css("background-color","#ffffff")//被點擊到的游標變色，前面的selector用this也可以
+
                     $(".sidenav li:eq("+e.data.id+")").css("background-color","#ffffff")//被點擊到的游標變色，前面的selector用this也可以
 
                 })
 
                 })
 
             }
 
             }
Line 49: Line 49:
 
             //計算導覽列垂直置中的高度
 
             //計算導覽列垂直置中的高度
 
             function center(){
 
             function center(){
−
                 pos=$(window).height()/2-$(".nav").height()/2
+
                 pos=$(window).height()/2-$(".sidenav").height()/2
−
                 $(".nav").css("top",pos)
+
                 $(".sidenav").css("top",pos)
 
             }
 
             }
 
              
 
              
Line 99: Line 99:
 
     }
 
     }
 
/*    插入導覽列    */
 
/*    插入導覽列    */
−
     .nav{
+
     .sidenav{
 
         position: fixed;
 
         position: fixed;
 
         top:50%;
 
         top:50%;
Line 105: Line 105:
 
         cursor:pointer;
 
         cursor:pointer;
 
     }
 
     }
−
     #nav ul li{
+
     li.navli{
 
         width:15px;
 
         width:15px;
 
         height:15px;  
 
         height:15px;  
Line 131: Line 131:
 
<body>
 
<body>
 
<div class="container">
 
<div class="container">
−
     <div class="nav">
+
     <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>

  • Project
  • Background
  • Design
  • Result
  • Modeling

Page 1

Page 2

Page 3

Page 4

Page 5